事件偵聽
- addEventListener : 非 IE 7 8 下使用
- 語法： 元素.addEventListener('事件類型'， 事件處理函數， 冒泡還是捕獲)
要點：
- 偵聽事件函數不能帶入參數；
- 偵聽事件函數有且僅有一個參數e,就是事件接收到事件對象，其他函數沒有；
- 事件函數不能寫return 返回值，但是可以用return跳出，不再執行下去；
<button id="bn0">按鈕</button>
<script>
var bn=document.querySelector("button");
bn.addEventListener("click",clickHandler1);
bn.addEventListener("click",clickHandler2);
function clickHandler1(e){
num++;
console.log("aaa");
if(num>1){
// this是事件偵聽的對象
// e.currentTarget.removeEventListener("click",clickHandler1);
//將clickHandler1事件移除
this.removeEventListener("click",clickHandler1);
}
}
function clickHandler2(e){
// console.log("bbb");
console.log(e.type)
}
</script>
注意：
- 當你點擊 bn 的時候，兩個函數都會執行，並且會按照你注冊的順序執行
- 當元素的事件不再使用時，必須刪除，否則會造成內存堆積，偵聽事件都會被存儲在堆中
- 當元素被刪除了，也必須刪除該元素的所有事件
- attachEvent ：IE 7 8 下使用
- 語法： 元素.attachEvent('事件類型'， 事件處理函數)
bn.attachEvent('onclick', function () {
console.log('我是第一個事件')
})
bn.attachEvent('onclick', function () {
console.log('我是第二個事件')
})
當你點擊 bn 的時候，兩個函數都會執行，並且會按照你注冊的順序倒敘執行
先打印 我是第二個事件 再打印 我是第一個事件
注意： 事件類型的時候要寫 on，點擊事件就行 onclick
兩個方式的區別
- 注冊事件的時候事件類型參數的書寫
addEventListener ： 不用寫 on
attachEvent ： 要寫 on
-參數個數
addEventListener ： 一般是三個常用參數
attachEvent ： 兩個參數
-執行順序
addEventListener ： 順序注冊，順序執行
attachEvent ： 順序注冊，倒敘執行
-適用瀏覽器
addEventListener ： 非 IE 7 8 的瀏覽器
attachEvent ： IE 7 8 瀏覽器
addEventListener() 和 onclick的區別：
- onclick不能同時執行兩個函數，addEventListener()可以執行兩個不同的函數；
- 移除事件偵聽的方式不同
document.onclick=function(){
document.onclick=null;//移除事件偵聽
console.log("a")
}
//事件會覆蓋上面的事件
document.onclick=function(){
console.log("b");
}
document.addEventListener("click",clickHandler1);
document.addEventListener("click",clickHandler2);
function clickHandler1(e){
//移除事件偵聽
document.removeEventListener("click",clickHandler1);
console.log("a");
}
function clickHandler2(e){
//不會覆蓋上面的事件
console.log("b")；
}
- 事件匿名函數的不斷迭代就會造成回調地獄，而使用事件注冊時用的是命名函數就會減少造成回調地獄
// 事件匿名函數的不斷迭代就會造成回調地獄
document.onclick=function(){
var bn=document.querySelector("button");
bn.onclick=function(){
console.log("aaa");
}
}
注意：以后寫函數就不使用匿名函數
- addEventListener可以在捕獲階段和冒泡階段觸發，而onclick只能冒泡階段觸發
document.body.addEventListener("click", clickHandler);//冒泡階段執行
document.body.addEventListener("click", clickHandler,true);//捕獲階段執行
- onclick支持IE低版本，addEventListener不支持IE8一下，低版本的IE使用 attachEvent 進行事件偵聽；使用 detachEvent 移除事件偵聽。
document.attachEvent("onclick",clickHandler);//IE8及以下使用，其他版本和其他瀏覽器不支持
function clickHandler(e){
console.log("aaa");
document.detachEvent("onclick",clickHandler);//移除事件偵聽
}
事件偵聽和移除的兼容寫法：
function addEvent(elem,type,eventHandler){
try{
elem.addEventListener(type,eventHandler);
}catch(e){
elem.attachEvent("on"+type,eventHandler);
}
}
function removeEvent(elem,type,eventHandler){
try{
elem.removeEventListener(type,eventHandler);
}catch(e){
elem.detachEvent("on"+type,eventHandler);
}
}
addEvent(document,"click",clickHandler);
function clickHandler(){
}
高級版：事件偵聽
js部分
//獲取元素
var bn0=document.getElementById("bn0");
//綁定事件
on(bn0,"click",clickHandler);
function clickHandler(e){
console.log(e);
}
//偵聽事件
function on(target,type,handler){
var b=judgeBrowser("IE");
if(b && Number(b)<9){
target.attachEvent("on"+type,handler);
}else{
target.addEventListener(type,handler);
}
}
/*
獲取瀏覽器和版本
通過瀏覽器打開，會返回當前瀏覽器名和版本號
return
數組 [瀏覽器:String,瀏覽器版本號:String]
*/
function getBrowserRV(){
var str=navigator.userAgent;
// 判斷是否是Chrome
if(str.indexOf("Chrome")>-1){
var index=str.indexOf("Chrome");
return str.slice(index,str.indexOf(" ",index+1)).split("/");
}
// 判斷是否是Firefox
if(str.indexOf("Firefox")>-1){
var index=str.indexOf("Firefox");
return str.slice(index).split("/");
}
// 判斷是否是IE11
if(str.indexOf("rv:")>-1 && str.indexOf("Trident")>-1){
return ["IE","11"];
}
// 判斷是否是IE10及以下
if(str.indexOf("Trident")>-1){
var index=str.indexOf("MSIE");
return ["IE",str.slice(index,str.indexOf(";",index)).split(" ")[1]];
}
}
//判斷瀏覽器版本
function judgeBrowser(browser){
var arr=getBrowserRV();
if(browser.toLowerCase()===arr[0].toLowerCase()){
return arr[1];
}else{
return false;
}
}