事件監聽和事件綁定

事件監聽

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