乐趣区

事件监听和事件绑定

jiezi

事件监听

addEventListener 和 attachEvent 区别

addEventListener，removeEventListener 是 DOM2 级事件定义的方法；addEventListener 有三个参数：事件类型，执行函数，是否捕获；addEventListener 可以实现同一个元素绑定多个 click 事件，当条件触发时，会依次执行相应的函数；例如 

//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
// 执行顺序为 method1->method2->method3

attachEvent 和 detachEvent 是 IE7，8 可用的方法；attachEvent 接受两个参数：类型（要加上 on），和执行函数；这两个方法支持冒泡阶段执行；当同一个元素也可以绑定多个 click 事件时，执行顺序与 addEventListener 的执行顺序相反；

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
// 使用格式是前面是事件类型, 注意的是需要加 on, 比如 onclick,onsubmit,onchange, 执行顺序是
//method3->method2->method1

兼容性写法 

 function myAddEvent(obj, ev, fn,useCapture)    //obj 为要绑定事件的元素，ev 为要绑定的事件，fn 为绑定事件的函数,userCapture 为是否在捕获阶段执行
            {
                var useCapture = useCapture || false;
                if(obj.attachEvent) {obj.attachEvent("on" + ev, fn);
                }
                else {obj.addEventListener(ev, fn, useCapture);
                }
            }

事件绑定

三种事件绑定方式

  • onclik 调用 
<button id="btn">click</button>
 var btn = document.getElementById('btn');
 btn.onclick = function(){alert(1)};
  • addEventListener 调用 
<button id="btn">click</button>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){alert(2)},false);
  • DOM 结构中调用 
 <button id="btn" onclick ="demo()">click</button>
function demo(){alert(3)
 }

click() 和 onclick()

 document.getElementById("target").onclick(); 
  document.getElementById("target").click();

click() 是真正地用程序取点击按钮，触发了 onclick() 事件；
onclick() 只是简单地调用了 btn 的 onclick 所指向的方法，只是调用方法而已，并未触发事件

onclick 绑定多个事件会覆盖

用 “addeventlistener” 可以绑定多次同一个事件，且都会执行，而在 DOM 结构如果绑定两个 “onclick” 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 

    <script>

     function clickone(){ alert("hello"); } // 执行这个

     function clicktwo(){ alert("world!"); }

    </script>

  2. <div id="btn"></div>

    <script>

     document.getElementById("btn").onclick = function（）{alert("hello"); }

     document.getElementById("btn").onclick = function（）{alert("world"); } // 执行这个

    </script>

  3. <div id="btn"></div>

    <script>

     document.getElementById("btn").addeventlistener("click",clickone,false);

     function clickone(){ alert("hello"); } // 先执行

     document.getElementById("btn").addeventlistener("click",clicktwo,false);

     function clicktwo(){ alert("world"); } // 后执行

    </script>

参考博文：

https://www.jianshu.com/p/4af0476a08c9
https://blog.csdn.net/longzhoufeng/article/details/80689150
https://blog.csdn.net/andrewniu/article/details/81102114
https://blog.csdn.net/ion_l/article/details/82662126
退出移动版