當我們在網頁上進行操作時，比如點擊按鈕、輸入文字、鼠標移動等，都會觸發事件，而javascript正是利用事件來實現與網頁的交互。本文將介紹javascript事件的基礎知識：事件類型、事件監聽、事件冒泡、事件捕獲和事件委托等。

事件類型

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

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

事件監聽

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

事件監聽是指我們利用addEventListener()或者attachEvent()方法，來為某個元素添加一個監聽器，從而捕獲該元素上的事件。監聽器是一段javascript代碼，會在事件發生時自動執行。在上面的例子中，我們為元素添加了一個mousemove事件監聽器，該監聽器可以獲取到鼠標當前的坐標，并輸出到控制臺。

事件冒泡

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

事件冒泡是指當某個元素上的事件被觸發時，該事件會向父級元素一級一級地冒泡，直到被整個文檔（document）所捕獲。在上面的例子中，我們先給

元素添加一個點擊事件監聽器，再給其父級元素

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

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