解析Js on及addEventListener原理用法的差別

1.on的用法：以onclick為例

第一種：

obj.onclick = function(){
//do something..
}

第二種：

obj.onclick= fn;
function fn (){
//do something...
}

第三種：當函數fn有參數的情況下使用匿名函數來傳參：

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

不能夠這樣寫:錯誤寫法：obj.onclick= fn(param):

• #因為這樣寫函數會立即執行，不會等點選觸發，特別注意
• #2.addEventListener的用法：
• 形式：

addEventListener(event,funtionName,useCapture)

參數：

event:事件的類型如「click」

funtionName：方法名稱

useCapture(可選)：布林值，指定事件是否在捕獲或冒泡階段執行。

true - 事件句柄在捕獲階段執行

false- false- 預設。事件句柄在冒泡階段執行寫入法：

第一種：

obj.addEventListener("click",function(){
//do something
}));

第二種，沒參數可以直接寫函數名稱

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}

第三種：函數有參數時需要使用匿名函數來傳遞參數

obj.addEventListener("click",function(){fn(parm)},false);

二.兩者的差異

1.on事件會被後面的on的事件覆蓋

#以onclick為例：

//obj是一个dom对象，下同//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

最終會只有彈框輸出：

hello world too

2.addEventListener 則不會覆寫。

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

這樣會連續輸出：

hello world
hello world too

#三.addEventListener注意事項：

1.特別說明addEventListener不被IE9以下相容，IE9以下用使用attachEvent()

obj.attachEvent(event,funtionName);

參數：

event:事件類型（需要寫成「onclick 「前面加on，這個與addEventListener不同）

• funtionName:方法名稱（要參數是也是需要使用匿名函數來傳參）
• 四.事件集合：
• 1.滑鼠事件：

#click(點選)

dbclick(雙擊)

• mousedown(滑鼠按下)
• mouseout(滑鼠移走)
• mouseover(滑鼠移入)
• mouseup(滑鼠彈起)
• mousemove(滑鼠移動)
• 2.鍵盤事件：
• keydown(按鍵按下)
• keypress(按鍵)
• keyup(鍵起來)

3.HTML事件：

load（載入頁面）unload（卸載離開頁面）##change（改變內容）

scroll（滾動）

focus（獲得焦點）

#blur（失去焦點）

##五.總結：###############onXXX與addEventListener都是為dom元素加入事件監聽，使其在事件發生後執行對應的程式碼，操作。有了它們我們實現了頁面與使用者互動。 #########相關學習推薦：###javascript影片教學#########

以上是解析Js on及addEventListener原理用法的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！