addEventListener
定義和用法
addEventListener 用於向指定元素添加事件句柄（又稱事件處理函數）
語法
element.addEventListener(event, function, useCapture)
element 文檔節點，duocument，window。
event 必須有。是一個字符串，指定事件名（一般不使用“on前綴”，例如“click，mouseover”）。
function 必須有。指定要事件觸發時執行的函數（可以是函數，也可以是函數名）。
useCapture 可選。布爾值（true 或者false）指定事件是否在捕獲階段還是在冒泡階段執行,一般情況下默認值為false
1、如果為true則事件句柄在捕獲階段執行
2、如果為false則事件句柄在冒泡階段執行
實例
通過點擊按鈕改變背景色(主要代碼):
document.getElementById("Btn").addEventListener("click",function(){
document.getElementById("box").style.backgroundColor = 'green';
});
實例
可以在文檔中添加多個事件，添加的事件不會覆蓋已存在的事件， 該下實例演示了如何在<button>元素中添加兩個點擊事件：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #box{ width:50px; height:50px; background-color: red; } </style> <body> <div id="box"> </div> <button id="Btn">點擊</button> <script type="text/javascript"> document.getElementById("Btn").addEventListener("click",function(){ document.getElementById("box").style.backgroundColor = 'green'; }); document.getElementById("Btn").addEventListener("click",function(){ this.style.backgroundColor = 'red'; }); </script> </body> </html>
實例
可以通過函數名來引用外部函數（主要代碼）：
document.getElementById("Btn").addEventListener("click",changeColor ,true);
function changeColor(){
document.getElementById("box").style.backgroundColor = 'green';
}
有useCapture值時：就要想到 addEventListener－事件流
當一個事件發生時，會有三個階段
捕獲觸發 從根節點開始挨個往下，檢測每個節點是否檢查是否調用了事件處理函數。如果調用了事件處理函數，並且 useCapture 為 true，則調用該事件處理函數。
目標觸發 觸發在目標對象本身調用了事件處理函數。
冒泡觸發 從目標節點到根節點，檢測每個節點是否調用了事件處理函數。如果調用了事件處理函數，並且 useCapture 為 false，則調用該事件處理函數。
1、 捕獲時，以下執行結果為 2,1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="Btn">點擊</button> <script type="text/javascript"> //捕獲時觸發， 當useCapture為true時觸發,因此以下執行的結果是2,1 var btn=document.getElementById('Btn'); btn.addEventListener('click',function(){alert('1');},false); document.body.addEventListener('click', function(){alert('2');},true); //捕獲時觸發 </script> </body> </html>
2、 冒泡時，以下執行結果為1,2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="Btn">點擊</button> <script type="text/javascript"> //冒泡時觸發， 當useCapture為false時觸發,因此以下執行的結果是1,2 var btn=document.getElementById('Btn'); btn.addEventListener('click',function(){alert('1');},false); document.body.addEventListener('click', function(){alert('2');},false); //冒泡時觸發 </script> </body> </html>