資訊專欄INFORMATION COLUMN
摘要：在和級事件處理程序中，瀏覽器都會將一個對象傳入到事件處理程序中，這種用指定的事件處理程序的形參當(dāng)然可以隨便命名了，一般簡寫為了。其實還可以將事件處理函數(shù)定義為無參函數(shù)，可以用來獲取事件對象。
問題
今天突然要維護(hù)一個老古董的項目，里面大部分都是原生js和jquery，用vue之類多了，這些都有些生疏... 代碼中有一個HTML事件處理程序，
function clickHandler(e) {
console.log(e.target);
}
剛開始都沒注意有啥錯，然后在函數(shù)中e.target等都會報錯:ReferenceError: e is not defined
很明顯，傳入的事件對象參數(shù)是錯誤的，在HTML事件處理程序的情況下正確的做法是傳入完整的event名稱，
其實event可以看作是window.event的簡寫，用window對象的其他屬性試驗下就可以發(fā)現(xiàn)，比如用location，, 那么函數(shù)中e.href即可打印出當(dāng)前鏈接。
function clickHandler(e) {
console.log(e.href);
}
思考
其實上面本來不是個問題，主要平時很少用行內(nèi)的HTML事件處理程序，所以隨手把參數(shù)event寫錯為了e。在DOM0和DOM2級事件處理程序中，瀏覽器都會將一個event對象傳入到事件處理程序中，這種用js指定的事件處理程序的形參當(dāng)然可以隨便命名了，一般簡寫為e了。
DOM0仍然用上面的聲明函數(shù)：
function clickHandler(e) {
console.log(e.target);
}
document.getElementsByTagName("button")[0].onclick = clickHandler;
準(zhǔn)確的打印出了button元素。
其實還可以將事件處理函數(shù)定義為無參函數(shù)，可以用arguments來獲取事件對象。
function clickHandler1() { //無參處理函數(shù)
var e = arguments[0];
console.log(e.target);
}
DOM2
最常用的就是dom2級事件處理程序了：
document.getElementsByTagName("button")[0].addEventListener("click", clickHandler, false );
同樣也可以使用無參函數(shù)
document.getElementsByTagName("button")[0].addEventListener("click", clickHandler1, false );
匿名函數(shù)時候需要注意的
DOM1和2級事件處理程序也常用匿名函數(shù)的方式：
document.getElementsByTagName("button")[0].onclick = (e) => {
console.log(e.target);
}
這樣傳入event參數(shù)的有參匿名函數(shù)是沒有問題的，但是如果用無參函數(shù)的話下面代碼就會報錯出問題：
document.getElementsByTagName("button")[0].onclick = () => {
var e = arguments[0];
console.log(e.target);
}
根據(jù)MDN上描述，arguments不能使用箭頭函數(shù)，因為箭頭函數(shù)沒有自己的this，使用的是封閉執(zhí)行作用域的this。
但是若非要使用arguments的話可以傳入...args：
document.getElementsByTagName("button")[0].onclick = (...args) => {
var e = args[0];
console.log(e.target);
}
事件處理程序傳遞多個參數(shù)
在最早的HTML事件處理程序中我們可以直接傳入多個參數(shù)，
但是DOM0和2級事件處理程序默認(rèn)只傳入event參數(shù)，可以采用閉包的方法(IIFE)來處理：
document.getElementsByTagName("button")[0].addEventListener("click", (function(a, b) {
return function(e) {clickHandler(e, a, b); };
}) ("a", "b"), false);
event.target和event.currentTarget
既然都寫了事件處理程序順便再復(fù)習(xí)下這兩個的區(qū)別，target是事件的實際目標(biāo)，currentTarget是處理事件的元素，也就是綁定事件函數(shù)的元素，事件處理函數(shù)中this的值等于currentTarget。
在線演示在線demo
參考資料js高級程序設(shè)計（第三版）
Javascript event handler with parameters
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98853.html
摘要：事件的綁定和解綁的多事件綁定之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數(shù)，所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發(fā)時把這個事件往上冒泡到上，因為上綁定事件響應(yīng)，所以能觸發(fā)這個動作。 事件的綁定和解綁 on()的多事件綁定 之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數(shù)，所有這類事件都是屬于快捷處理...
摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作，另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作，另一個方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規(guī)范事件的相關(guān)內(nèi)容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現(xiàn)用戶與WEB網(wǎng)頁之間的動態(tài)交互，接收用戶操作并做出相應(yīng)的反饋，而事件在此間則充當(dāng)橋梁的重要角色。 日常開發(fā)中，經(jīng)常會...
摘要：事件流與事件委托事件，即文檔或瀏覽器中發(fā)生的一些特定交互的瞬間，我們可以利用事件監(jiān)聽來預(yù)定事件，當(dāng)事件發(fā)生的時候執(zhí)行相應(yīng)的處理程序。本文主要討論事件流的三個階段，及利用事件委托機(jī)制進(jìn)行性能優(yōu)化。 事件流與事件委托 事件，即文檔或瀏覽器中發(fā)生的一些特定交互的瞬間，我們可以利用事件監(jiān)聽來預(yù)定事件，當(dāng)事件發(fā)生的時候執(zhí)行相應(yīng)的處理程序。當(dāng)事件發(fā)生在某個DOM節(jié)點上時，事件在DOM結(jié)構(gòu)中進(jìn)行一級...
閱讀 871·2021-10-11 10:59
閱讀 2806·2019-08-30 15:43
閱讀 2136·2019-08-30 11:08
閱讀 1657·2019-08-29 15:20
閱讀 1016·2019-08-29 13:53
閱讀 493·2019-08-26 13:24
閱讀 1644·2019-08-26 13:24
閱讀 2828·2019-08-26 12:08
