js中addEventListener和on的区别

用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可以多次绑定同一个事件并且不会覆盖上一个事件。

window.onload = function(){var box = document.getElementById("box");box.addEventListener("click",function(){console.log("我是box1");})box.addEventListener("click",function(){console.log("我是box2");})}

运行结果：我是box1 　　　　　我是box2 　　　　　 　　　　　 element.addEventListener(event, function, useCapture)

event:必须。字符串，指定事件名。注意：不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

function:必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

useCapture:可选。布尔值（默认是false），指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 事件句柄在冒泡阶段执行。

第三个参数的使用。比如：

如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）

box.addEventListener("click",function(){console.log("box");})child.addEventListener("click",function(){console.log("child");})　　执行的结果：　　　　　　　　child　　　　　　　　box

也就是说，默认false情况事件是按照事件冒泡的执行顺序进行的。

如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。

box.addEventListener("click",function(){console.log("box");},true)child.addEventListener("click",function(){console.log("child");})　　执行的结果：　　　　　　　　box　　　　　　　　child

所以第三个参数是事件执行的顺序

false默认执行的顺序是事件冒泡执行过程： 从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box

true事件捕获执行过程：从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child

js 添加事件 attachEvent 和 addEventListener 的用法

在IE中我们可以使用attachEvent方法。火狐和其他浏览器都不支持attachEvent方法,幸运的是他们都支持W3C标准的addEventListener方法