當(dāng)我們?cè)诰W(wǎng)頁上進(jìn)行操作時(shí)，比如點(diǎn)擊按鈕、輸入文字、鼠標(biāo)移動(dòng)等，都會(huì)觸發(fā)事件，而javascript正是利用事件來實(shí)現(xiàn)與網(wǎng)頁的交互。本文將介紹javascript事件的基礎(chǔ)知識(shí)：事件類型、事件監(jiān)聽、事件冒泡、事件捕獲和事件委托等。

事件類型

//給按鈕添加點(diǎn)擊事件
document.getElementById("myButton").addEventListener("click", function(){
alert("Hello World!");
});

其中，"click"就是事件類型，代表用戶點(diǎn)擊鼠標(biāo)時(shí)觸發(fā)的事件。除了click，還有很多其他的事件類型，比如鼠標(biāo)移動(dòng)事件（mousemove）、鍵盤按鍵事件（keyup）、窗口大小變化事件（resize）等等。在javascript中，我們可以利用addEventListener()方法為某個(gè)元素添加監(jiān)聽器，從而捕獲某種類型的事件。

事件監(jiān)聽

//給元素添加mousemove事件監(jiān)聽器
document.body.addEventListener("mousemove", function(event){
console.log("Mouse X: " + event.clientX + ", Mouse Y: " + event.clientY);
});

事件監(jiān)聽是指我們利用addEventListener()或者attachEvent()方法，來為某個(gè)元素添加一個(gè)監(jiān)聽器，從而捕獲該元素上的事件。監(jiān)聽器是一段javascript代碼，會(huì)在事件發(fā)生時(shí)自動(dòng)執(zhí)行。在上面的例子中，我們?yōu)?body>元素添加了一個(gè)mousemove事件監(jiān)聽器，該監(jiān)聽器可以獲取到鼠標(biāo)當(dāng)前的坐標(biāo)，并輸出到控制臺(tái)。

事件冒泡

//給
元素添加點(diǎn)擊事件監(jiān)聽器
document.getElementById("myDiv").addEventListener("click", function(){
console.log("Click myDiv");
});
//給
元素添加點(diǎn)擊事件監(jiān)聽器
document.querySelector("p").addEventListener("click", function(){
console.log("Click p");
});
//點(diǎn)擊
元素
//結(jié)果依次輸出："Click p" 和 "Click myDiv"

事件冒泡是指當(dāng)某個(gè)元素上的事件被觸發(fā)時(shí)，該事件會(huì)向父級(jí)元素一級(jí)一級(jí)地冒泡，直到被整個(gè)文檔（document）所捕獲。在上面的例子中，我們先給

元素添加一個(gè)點(diǎn)擊事件監(jiān)聽器，再給其父級(jí)元素

//給
元素添加點(diǎn)擊事件監(jiān)聽器
document.getElementById("myDiv").addEventListener("click", function(){
console.log("Click myDiv", "Event Phase: " + event.eventPhase);
}, true);
//給
元素添加點(diǎn)擊事件監(jiān)聽器
document.querySelector("p").addEventListener("click", function(){
console.log("Click p", "Event Phase: " + event.eventPhase);
}, true);
//點(diǎn)擊
元素
//結(jié)果依次輸出： 
// "Click myDiv Event Phase: 1"
// "Click p Event Phase: 2"
// "Click p Event Phase: 3"
// "Click myDiv Event Phase: 3"

//利用事件委托，為所有的
元素添加點(diǎn)擊事件監(jiān)聽器
document.querySelector("ul").addEventListener("click", function(event){
if(event.target.nodeName === "LI"){
console.log("Click: " + event.target.textContent);
}
});