JavaScript添加事件監(jiān)聽(tīng)的方法有哪些？小編來(lái)告訴大家：

1.我們一般在的事件添加時(shí)是這樣做的：

elm.onclick = function( ) { //handler } 這樣的寫(xiě)法兼容主流的瀏覽器，但是存在一個(gè)問(wèn)題，當(dāng)同一個(gè)elm綁定多個(gè)事件時(shí)，只有最后一個(gè)事件會(huì)被添加

如：

elm.onclick = handler1;
       elm.onclick = handler2;
       elm.onclick = hander3;

只有handler3會(huì)被添加執(zhí)行，所以我們使用另外一種方法添加事件;

2.

attachEvent
      elm.attachEvent("onclick",handler1);
      elm.attachEvent("onclick",handler2);
      elm.attachEvent("onclick",handler3);

三個(gè)方法執(zhí)行的順序是3 - 2 -1;

標(biāo)準(zhǔn):

addEventListener( ):
elm.addEventListener( "click",handler1,false );
elm.addEventListener( "click",handler2,false );
elm.addEventListener( "click",handler3,false );

執(zhí)行的順序：1 - 2 - 3

該方法的第三個(gè)參數(shù)是泡沫獲取，是一個(gè)布爾值：當(dāng)為false時(shí)表示由里向外，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);
// 點(diǎn)擊div2 div2 - div1 
document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false);
document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, true);
   // 點(diǎn)擊div2 div1 - div2

3.DOM方法 addEventListener() 和 removeEventListener()是用來(lái)分配和刪除事件的函數(shù)。 這兩個(gè)方法都需要三個(gè)參數(shù)，分別為：

事件名稱(String)、要觸發(fā)的事件處理函數(shù)(Function)、指定事件處理函數(shù)的時(shí)期或階段(boolean)。

DOM事件流如圖(剪自javascript高級(jí)程序設(shè)計(jì))：

由圖可知捕獲過(guò)程要先于冒泡過(guò)程

當(dāng)?shù)谌齻€(gè)參數(shù)設(shè)置為true就在捕獲過(guò)程中執(zhí)行，反之就在冒泡過(guò)程中執(zhí)行處理函數(shù)。

4.通用的事件添加方法：

  on:function(elm,type,handler)
    // 添加事件
    return elm.attachEvent ? elm.attachEvent("on"+type,handler) : elm.addEventListener(type,handler,false);

通過(guò)上述相信大家對(duì)JS添加事件監(jiān)聽(tīng)的方法已經(jīng)有所了解，大家如果對(duì)此比較感興趣，想知道更多的相關(guān)知識(shí)，可以來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的JavaScript高級(jí)視頻教程，里面的內(nèi)容豐富，通俗易懂，適合沒(méi)有基礎(chǔ)的小白學(xué)習(xí)，希望對(duì)大家能夠有所幫助。