on事件和addevent事件的区别

on事件

 function fn1(){alert(1)};
 function fn2(){alert(2)};
document.onclick=fn1();
document.onclick=fn2();

只会弹出2
- 使用on事件，给标签加多个事件的时候后面的会覆盖前面的。

 function fn1(){alert(1)};
 function fn2(){alert(2)};
 document.addEventListener('onclick',fn1()); //1        
  document.addEventListener('onclick',fn2()); //2

.addEvent事件监听可以给一个标签添加多个事件,并且之前的不会被覆盖掉
- addevent里面可以传递三个参数：
* 1.addevent 里面的参数,第一个是传入对应的事件的类型(注意不要加on)
* 2.addevent 第二个参数,就是函数的回调
* 3.bool类型取值,如果是false(默认就是),事件的触发机制就会按照冒泡(从下往上),如果是true,就会按照事件捕获,从上往下
例如：

  <style>
     .div1{
           width: 300px;
            height: 300px;
            background: red;
            margin: 100px auto;  }
        .div2{
            width: 200px;
            height: 200px;
            background: blue;  }
        .div3{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
    <script>
        window.onload=function(){

            div1.addEventListener("click",function(){
                alert(1);
            } ,false);
            div1.addEventListener("click",function(){
                alert(2)
            } ,true);
            div3.addEventListener("click",function(){
                alert(3)
            } ,false);
        }
    </script>
</head>
<body>
<div class="div1">
          <div class="div2">
                 <div class="div3"></div>
          </div>
</div>
</body>

给div1，div3 添加点击事件，依次弹出2,3,1

 1. div1.addEventListener("click",function(){
                alert(1);
            } ,false);
 2. div1.addEventListener("click",function(){
                alert(2)
            } ,true);
  3.div3.addEventListener("click",function(){
                alert(3)
            } ,false);

分析代码：从上往上看代码，点击div1, 有一个事件进来，为false所以没反映，不会弹；第二段代码中为true，div1捕获到事件弹出2；第三段代码，false同样没反应。事件出去触发第三段代码，弹出3；接着往上走，走到第一段代码弹出1

false：冒泡，就是如果有一个出去的事件触发了你，你就去执行这个函数
true：捕获，如果有一个进来的事件触发了你，你就去执行这个函数

on事件和addevent事件的区别

on事件

猜你喜欢