addEventListener()是標(biāo)準(zhǔn)的綁定事件監(jiān)聽函數(shù)的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數(shù)；但是，IE8.0及其以下版本不支持該方法，所以，這種綁定事件的方法必須要處理瀏覽器兼容問題。
語法
對象.addEventListener(事件名稱,事件處理函數(shù),布爾值)
參數(shù)
-
事件名稱
是一個字符串，需要加引號
-
事件處理函數(shù)（事件句柄函數(shù)）
既可以是命名函數(shù)，也可以是匿名函數(shù)
-
布爾值
- true 事件處理函數(shù)是在事件的捕獲階段發(fā)生的
- false 事件處理函數(shù)是在事件的冒泡階段發(fā)生的（默認(rèn)值，如果不寫默認(rèn)為false）
特性
-
可以通過第三個參數(shù)-布爾值來對事件處理函數(shù)調(diào)用的時機(jī)進(jìn)行操控
-
既可以調(diào)用命名函數(shù)，也可以調(diào)用匿名函數(shù)（最好為命名函數(shù)）
btn.addEventListener('click',function(){
console.log(1);
},false);
btn.addEventListener('click',fn1,false); //調(diào)用時直接寫函數(shù)名稱即可
function fn1(){
console.log(1);
};
-
可以給元素添加多個事件，且不會互相覆蓋
btn.addEventListener('click',function(){
console.log(1);
},false);
btn.addEventListener('click',function(){
console.log(2);
},false);
//這段代碼最后會在控制臺同時輸出1和2
-
this指向當(dāng)前元素
<body>
<input type="button">
</body>
btn.addEventListener('click',function(){
console.log(this); //<input type="button">
},false);
移除方法
對象.removeEventListener(事件名稱,事件處理函數(shù),布爾值)
- 直接移除
btn.addEventListener('click',fn1,false);
function fn1(){
console.log(1); //事件綁定被移除，無論怎么點擊按鈕都無法在控制臺輸出內(nèi)容
};
btn.removeEventListener('click',fn1,false);
- 執(zhí)行一次后移除
btn.addEventListener('click',fn1,false);
function fn1(){
console.log(1); //事件執(zhí)行一次后被移除，只會輸出一次1
btn.removeEventListener('click',fn1,false);
};
注意：
- 該方法無法移除匿名函數(shù)的事件綁定
故在使用該方法時事件處理函數(shù)最好為命名函數(shù)
btn.addEventListener('click',function(){
console.log(1); //這里重復(fù)點擊還是會在控制臺輸出1
},false);
btn.removeEventListener('click',function(){
console.log(1);
},false);
- 該方法移除時，所有參數(shù)必須相同
btn.addEventListener('click',fn1,false);
function fn1(){
console.log(1);
};
btn.removeEventListener('click',fn1,true); //由于這里移除時第三個參數(shù)為true，與上面不同，點擊后還是會輸出1
阻止事件冒泡
采用事件對象.stopPropagation()方法
btn.addEventListener('click',fn1,false);
function fn1(ev){
ev.stopPropagation();
};
