Javascript addEventListener和attachEvent的区别_JavaScript编程学院_IT学院
当前位置：&&&&
Javascript addEventListener和attachEvent的区别
首先，Javascript有3种绑定事件监听的方法：
&div onclick=&alert(&事件绑定成功了！&)&&事件绑定Demo&/div&
&div id=&div1&&事件绑定Demo&/div&
document.getElementById(&div1&).onclick=function(){
& & alert(&事件绑定成功了！&);
&div id=&div1&&事件绑定Demo&/div&
function &fun(){
& & alert(&事件绑定成功了！&);
document.getElementById(&div1&).addEventListener(&click&,fun,false);
addEventListener和attachEvent都是第三种绑定事件监听的方法，区别如下。
一、addEventListener和attachEvent的兼容性问题
addEventListener是符合W3C规范的事件绑定方法，FireFox、Chrome、Safari都是用它来绑定事件。
attachEvent是IE私有的，不符合W3C规范，而且在IE下，只能使用它来绑定事件，addEventListener是无效的。
所以，要想绑定事件，必须处理兼容性问题。
二、addEventListener和attachEvent的语法规则
addEventListener共有3个参数，如下所示：
element.addEventListener(type,listener,useCapture);
要绑定事件的对象，及HTML节点。
事件名称，注意去掉事件前边的&on&，比如&onclick&要写成&click&，&onmouseover&要写成&mouseover&。
要绑定的事件监听函数，注意只写函数名，不要带括号。
userCapture
事件监听方式，只能是true和false：true，采用capture(捕获)模式；false，采用bubbling(冒泡)模式。如无特殊要求，一般是false。
这里有必要说一下捕获模式和冒泡模式的区别。
如图所示，有两层div元素，而且都设定有click事件，一般来说，如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件，还会同时触发红色元素的click事件，而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false，那就会使用bubbling(冒泡)模式，他是从内而外的流程，所以会先执行蓝色元素的click事件再执行红色元素的click事件，如果是true，那就是capture(捕获)模式，和bubbling(冒泡)模式相反是由外而内，会先执行红色元素的click事件才执行蓝色元素的click事件。
如果不同层的元素使用的useCapture不同，会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling(冒泡)模式的事件。
attachEvent共有2个参数，如下所示：
element.attachEvent(type,listener);
要绑定事件的对象，及HTML节点。
事件名称，注意加上事件前边的&on&，比如&onclick&和&onmouseover&，这是与addEventListener的区别。
要绑定的事件监听函数，注意只写函数名，不要带括号。
三、代码兼容处理
function regEvent(ele, event_name, fun)
& & if (window.attachEvent)&
& & & & ele.attachEvent(event_name, fun); &//IE浏览器
& & & &&event_name&= event_name.replace(/^on/, &&); & //如果on开头，删除on，如onclick-&click
& & & & ele.addEventListener(event_name, fun, false); &//非IE浏览器
注意，请不要以这种方式来判断IE浏览器：
& & (/msie/i).test(navigator.userAgent)
此种方法虽然简单易懂，但是有一个很大的隐患，就是浏览器升级以后支持W3C标准了，而并没有做向后兼容，这种情况下就会出现错误提示，程序崩溃，增加了维护成本。addEventListener和on的区别是什么_Javascript教程-织梦者
当前位置:&>&&>& > addEventListener和on的区别是什么
addEventListener和on的区别是什么
本文将为关注织梦者的朋友提供的是的addEventListener和on的区别相关教程，具体实例代码请看下文:
为什么需要addEventListener？
先来看一个片段：
&div id=&box&&追梦子&/div&
用on的代码
1 window.onload = function(){
var box = document.getElementById(&box&);
box.onclick = function(){
console.log(&我是box1&);
box.onclick = function(){
box.style.fontSize = &18px&;
console.log(&我是box2&);
10 }　　　　　运行结果：&我是box2&
看到了吧，第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，那不用猜，你们肯定知道了，对！addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
用addEventListener的代码
1 window.onload = function(){
var box = document.getElementById(&box&);
box.addEventListener(&click&,function(){
console.log(&我是box1&);
box.addEventListener(&click&,function(){
console.log(&我是box2&);
9 }　　　　运行结果：我是box1　　　　　　　　　我是box2
addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数。
第三个参数的使用
有时候的情况是这样的
&body&　　&div id=&box&&　　　　&div id=&child&&&/div&　　&/div&&/body&
如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）
1 box.addEventListener(&click&,function(){
console.log(&box&);
5 child.addEventListener(&click&,function(){
console.log(&child&);
7 })　　执行的结果：　　　　　　　　child　　　　　　　　box
也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。
如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。
1 box.addEventListener(&click&,function(){
console.log(&box&);
5 child.addEventListener(&click&,function(){
console.log(&child&);
　　执行的结果：
　　　　　　　　box
　　　　　　　　child
事件冒泡执行过程：
　　　　　　　　从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child-&box
事件捕获执行过程：
　　　　　　　　从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box-&child
通本学习您是不是更了解jQuery了呢．感谢关注织梦者
这些内容可能对你也有帮助
更多可查看Javascript教程列表页。
猜您也会喜欢这些文章拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(38cb3-ua98).
重新安装浏览器，或使用别的浏览器1438人阅读
为什么需要addEventListener？
先来看一个片段：
&div id=&box&&放逐的天空&/div&
用on的代码
window.onload = function(){
var box = document.getElementById(&box&);
box.onclick = function(){
console.log(&我是box1&);
box.onclick = function(){
box.style.fontSize = &18px&;
console.log(&我是box2&);
//运行结果：“我是box2”
看到了吧，第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，那不用猜，你们肯定知道了，对！addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
用addEventListener的代码
window.onload = function(){
var box = document.getElementById(&box&);
box.addEventListener(&click&,function(){
console.log(&我是box1&);
box.addEventListener(&click&,function(){
console.log(&我是box2&);
// 运行结果：我是box1
//　　　　　 我是box2
addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数,不写第三个参数默认false
第三个参数的使用
有时候的情况是这样的
　　&div id=&box&&
　　　　&div id=&child&&&/div&
　　&/div&
如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）
box.addEventListener(&click&,function(){
console.log(&box&);
child.addEventListener(&click&,function(){
console.log(&child&);
//执行的结果：child
//　　　　　　box
也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。
如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。
box.addEventListener(&click&,function(){
console.log(&box&);
child.addEventListener(&click&,function(){
console.log(&child&);
// 执行的结果：box
//　　　　　　 child
事件冒泡执行过程：
　　　　　　　　从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child-&box
事件捕获执行过程：
　　　　　　　　从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box-&child
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：42866次
排名：千里之外
原创：45篇
转载：48篇
(2)(2)(1)(1)(1)(4)(3)(3)(1)(2)(15)(24)(28)(6)