addeventlistener和onclick的区别

执行顺序为method1->method2->method3

var btn1Obj = document.getElementById("btn1");  
//element.addEventListener(type,listener,useCapture);  
btn1Obj.addEventListener("click",method1,false);  
btn1Obj.addEventListener("click",method2,false);  
btn1Obj.addEventListener("click",method3,false);

如果这样写,那么将会只有medhot3被执行

document.getElementById("btn").onclick = method1;  
document.getElementById("btn").onclick = method2;  
document.getElementById("btn").onclick = method3;
  • addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
  • 此外,addEventListenert方法第一个参数填写事件名,注意不需要写on,第二个参数可以是一个函数,第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理,第三个参数可以省略,大多数情况也不需要用到第三个参数。

addEventListener第三个参数的使用

  1. 如果我给box加click事件,如果我直接单击box没有什么问题,但是如果我单击的是child元素,那么它是怎么样执行的?(执行顺序)

html

<div id="box">
    <div id="child"></div>
</div>

js

box.addEventListener("click",function(){
    console.log("box");
})
 
 child.addEventListener("click",function(){
    console.log("child"); 
     
 })  
   // 执行的结果:        child        box
   //说明:默认情况事件是按照事件冒泡的执行顺序进行的。

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

box.addEventListener("click",function(){
    console.log("box");
 },true)
 
 child.addEventListener("click",function(){
     console.log("child");
 },true)
  执行的结果:
        box
        child
 
  1. 事件冒泡执行过程:(参数为false)

    从最具体的的元素(你单击的那个元素)开始向上开始冒泡,拿我们上面的案例讲它的顺序是:child->box

  2. 事件捕获执行过程:(参数为true)

    从最不具体的元素(最外面的那个盒子)开始向里面冒泡,拿我们上面的案例讲它的顺序是:box->child

posted @ 2017-04-07 15:31  sakura-sakura  阅读(295)  评论(0编辑  收藏  举报