JS事件監聽的添加方法

標籤：使用   需要   span   擷取   color   event   分配   log   監聽   

一、我們一般在的事件添加時是這樣做的：elm.onclick = function( ) { //handler } 這樣的寫法相容主流的瀏覽器，但是存在一個問題，當同一個elm綁定多個事件時，只有最後一個事件會被添加如：elm.onclick = handler1;       elm.onclick = handler2;       elm.onclick = hander3;只有handler3會被添加執行，所以我們使用另外一種方法添加事件； 二、IE：attachEvent      elm.attachEvent("onclick",handler1);      elm.attachEvent("onclick",handler2);      elm.attachEvent("onclick",handler3);      三個方法執行的順序是3 - 2  -1；標準:addEventListener( ):     elm.addEventListener( "click",handler1,false );     elm.addEventListener( "click",handler2,false );     elm.addEventListener( "click",handler3,false );執行的順序：1 - 2 - 3 該方法的第三個參數是泡沫擷取，是一個布爾值：當為false時表示由裡向外，true表示由外向裡: <div id="id1" >      <div id="id2"></div></div> document.getElementById(‘id1‘).addEventListener(‘click‘, function() { console.log(‘id1‘);}, false); document.getElementById(‘id2‘).addEventListener(‘click‘, function() { console.log(‘id2‘);}, false);// 點擊div2 div2 - div1 document.getElementById(‘id1‘).addEventListener(‘click‘, function() { console.log(‘id1‘);}, false);document.getElementById(‘id2‘).addEventListener(‘click‘, function() { console.log(‘id2‘);}, true);   // 點擊div2 div1 - div2 三、       DOM方法 addEventListener() 和 removeEventListener()是用來分配和刪除事件的函數。 這兩個方法都需要三個參數，分別為：事件名稱（String）、要觸發的事件處理函數(Function)、指定事件處理函數的時期或階段(boolean)。DOM事件流（剪自javascript進階程式設計）：由圖可知捕獲過程要先於冒泡過程當第三個參數設定為true就在捕獲過程中執行，反之就在冒泡過程中執行處理函數。四、通用的事件添加方法：  1、  on:function(elm,type,handler)  {    // 添加事件    return elm.attachEvent ? elm.attachEvent("on"+type,handler) : elm.addEventListener(type,handler,false);  }

 

JS事件監聽的添加方法