JS--addEventListener()

剛剛在做百度筆試題的時候發現有關于addEventListener這個方法，是以現在想了解多一點~~

去菜鳥驿站和其他的網站下學習了一下關于：addEventListener()方法--用于向指定的元素添加事件句柄。

它是為元素添加點選事件的，當使用者點選元素的時候，會觸發事件的發生。

例如，我們在這裡給出一段代碼：

docuemnt.getElementById("myBtn').addEventListener("click",function(){

document.getElementById("demo").innerHTML="Hello World";

});

**關于浏覽器的支援，IE8以及更早的IE版本是不支援addEventListener()方法的，Opera 7.0及Opera等更早的版本也是不支援的。

**文法

element.addEventListener(event,function,useCapture)  、

event ：指的是事件名，必須的，而且是字元串。

function： 也是必須的，指定事件出發時執行的函數。當事件對象會作為第一個參數傳入函數，事件對象的類型取決于特定的事件。例如"click"是屬于MouseEvent（滑鼠事件）對象。

useCapture：可選的值，布爾值，指定事件是否在捕獲或者冒泡階段執行。true-事件句柄在捕獲階段執行。false-預設值，事件句柄在冒泡階段執行。

【1】我們可以通過函數名來引用外部的函數。

document.getElementById("myBtn").addEventListener("click",myFunction);

【2】我們可以在文檔中添加很多事件，添加的事件是不會覆寫已存在的事件的。

document.getElementById("myBtn").addEventListener("click",myFunction);

document.getElementById("myBtn").addEventListener("click",someOtherFunction);

【3】還可以在同一個元素添加不同的類型的事件

document.getElementById("myBtn").addEventListener("mouseover',myFunction);

docuement.getElementById("myBtn").addEventListener("click",someOtherFunction);

【4】當傳遞參數值時，使用匿名函數調用帶參數的函數

document.getElementById("myBtn").addEventListener("click',function(){

myFunction(p1,p2);

});

【5】使用可選參數useCapture來示範冒泡和捕獲階段的不同：

document.getElementById("myDiv").addEventListener("click',myFunction,true);//這個是從捕獲的階段來執行

**我們這裡先談談捕獲階段和冒泡階段的差別：

捕獲階段這要是從最不精确的對象開始觸發，直到最精确的對象。

冒泡階段是從最精确的對象開始觸發，直到最不精确的。

我們形象地說出其實就是：捕捉就是從window-document-html-body-div-ul-li-a; 而冒泡的順序正好和捕捉相反： a-li-ul-div-body-html-document-window。

之前提到過IE8以及更早的版本是不支援addEventListener()事件的，是以我們這裡有另一個方法來适應跨浏覽器

attachEvent()方法來替代。

var x=document.getElementById("myBtn");

if(x.addEventListener){

x.addEventListener("click",myFunction);

}

else if(x.attachEvent){

x.attachEvent("onclick","myFunction");

}