详解onclick和addEventListener的区别
摘要
当我们想要给某个DOM元素绑定事件的时候,最常用的方法是通过on + 事件名字的方式。而在DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:
addEventListener()和removeEventListener().
并且它们都接受三个参数:要处理的事件名,作为事件处理的一个函数,一个布尔值。
最后的布尔值如果为false,表示在冒泡阶段调用事件处理函数,如果是true,表示在捕获阶段调用事件处理程序。
区别1:同时绑定多个事件
我们来想一个问题,我们使用onclick方法可不可以给一个按钮绑定多个事件呢?
我们来尝试一下:
<button id="btn">点击</button><script>btn.onclick = function(){console.log('第一次点击');}btn.onclick = function(){console.log('第二次点击');}</script>
然后我们来看一下结果是否两次都打印出来了:
可以看到只有第二次生效了,说明通过这种方法第二次绑定事件会将第一次覆盖!
现在我们来用第二种方法:
<button id="btn">点击</button><script>btn.addEventListener('click',()=>{console.log('第一次点击');},false);btn.addEventListener('click',()=>{console.log('第二次点击'),false});</script>
我们来看一下运行结果:
OK,可以看到通过这种方式我们是可以进行多次绑定事件的。
2.决定事件触发顺序
我们先来看一下代码:
<div id="div1"><button id="btn">点击</button></div><script>div1.onclick = function(){console.log('div1的事件');}btn.onclick = function(){console.log('btn的事件');}</script>
想一下如果我们点击了按钮,打印的顺序应该是什么样子的呢?
可以看到是从内而外,是以事件冒泡的方式来执行的。
而如果使用另一种方法:
<div id="div1"><button id="btn">点击</button></div><script>btn.onclick = function(){console.log('btn的事件');}div1.addEventListener('click',()=>{console.log('div1的事件');},true);</script>
我现在把div1的事件通过addEventListener的方式来绑定,并且给第三个参数设置为true。
那么结果就是这样的:
所以我们通过第二种方法我们可以决定DOM事件的触发是以事件捕获的事件流还是事件冒泡的事件流方式。
3.removeEventListener的使用方法
这个方法就是删除DOM指定的事件,如果我们删除onclick的话,直接将onclick的值设置为null就可以了。
那这个方法如何删除呢?我们来看一下代码:
div1.addEventListener('click',()=>{console.log('div1的事件');},true);div1.removeEventListener('click',()=>{console.log('div1的事件');},true);
这样做的话我们是否能将这个事件删除呢?答案是否定的,我们的两个事件处理程序虽然代码是一样的,但是它们确确实实不是一个事件处理程序,如果我们想要删除掉某个事件,我们必须这样做:
var fn = function(){console.log('div1的事件');}div1.addEventListener('click',fn,true);div1.removeEventListener('click',fn,true);
只有这样才能确定两个方法所用的为一段事件处理程序,也是有效的删除方法。
详解onclick和addEventListener的区别相关推荐
- MySQL 表分区详解MyiSam引擎和InnoDb 区别(实测)
MySQL 表分区详解MyiSam引擎和InnoDb 区别(实测) 一.什么是表分区 通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了. 如:某用户表的记录超过 ...
- Mysql存储引擎详解(MyISAM与InnoDB的区别)
Mysql存储引擎详解(MyISAM与InnoDB的区别) 存储引擎 MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平 ...
- mysql 社区版 innodb_MySQL 表分区详解MyiSam引擎和InnoDb 区别(实测)
MySQL 表分区详解MyiSam引擎和InnoDb 区别(实测) / -------------------- 写在最前面 ------------------ ...
- 详解http和https的区别
详解http和https的区别 (转自http://www.jzxue.com/jianzhanzhinan/jianzhanrumen/201103/29-6925.html) http与https ...
- 算术编码例题详解_百分数与百分点区别详解
通过以往的答疑经验,许多同学对于出现百分点的材料和题目不能够很好的百分点与已知百分数之间的关系.那么百分数与百分点的核心区别在哪里?常见题型中出现的百分数与百分点应该如何进行理解应用? 百分数与百分点 ...
- java中$和 的区别详解_Mybatis之#{}与${}的区别使用详解
1.两种取值方式的差异 mapper.xml映射文件 select * from t_emp WHERE emp_id=${id} and emp_name=#{name} java查询代码 para ...
- 七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用(安装,拉取2.x模板,初始化项目),Vue cli2详解,Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
- nginx中500,501,502,503,504,505状态码的详解及出现的原因/区别(转)
转载别人的,写的确实很直白明了,学习巩固了!很多人都是知其人不知所以然 nginx5xx系列状态码详解 一.502 - Bad Gateway fpm 官方解释:作为网关或者代理工作的服务器尝试执行请 ...
- 一文详解 Try 和异常的区别
作者 | 羽生结弦 责编 | 胡雪蕊 出品 | CSDN(ID:CSDNnews) Try 以及异常在C#中是很重要的内容,很多开发人员其实并不是很了解Try 和异常.在这篇文章中我将会各大家具体讲解 ...
最新文章
- telnet时显示:允许更多到 telnet 服务器的连接。请稍候再试
- 数据中心网络架构 — 云数据中心网络 — 新型叶脊二层网络架构
- SQL语句获取数据库名、所有表名、所有字段名及字段类型
- Android 五大存储方式具体解释
- 45.Keepalived高可用群集
- Snabbdom(虚拟dom-源码)
- PyQt5笔记(01) -- 创建空白窗体
- java条码识别技术_条码识别示例代码
- python单词的含义-python
- 网站集成paypal快捷支付
- JavaScript JSON.stringify()
- GNU Radio 之 rtl-sdr
- java调用perl脚本_Java中调用Perl脚本的应用
- apache 添加虚拟机
- Java中下载jar包
- vue商城秒杀倒计时功能
- 数学基础(矢量, 向量,矩阵,相等,加法,乘法)
- 青龙羊毛——去闲转(搬砖)
- 考研人最烦的6句话,教你霸气回怼!
- python画国旗和八卦图