事件监听和事件绑定

2019年9月12日 76次阅读 来源: komal

事件监听

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
    原文作者：komal
    原文地址: https://segmentfault.com/a/1190000020365694
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞