事件處理程序中event參數(shù)的傳遞

Code4App 發(fā)布于2019-08-23 12:37 / 1667人閱讀

摘要：在和級(jí)事件處理程序中，瀏覽器都會(huì)將一個(gè)對(duì)象傳入到事件處理程序中，這種用指定的事件處理程序的形參當(dāng)然可以隨便命名了，一般簡(jiǎn)寫(xiě)為了。其實(shí)還可以將事件處理函數(shù)定義為無(wú)參函數(shù)，可以用來(lái)獲取事件對(duì)象。

問(wèn)題

今天突然要維護(hù)一個(gè)老古董的項(xiàng)目，里面大部分都是原生js和jquery，用vue之類(lèi)多了，這些都有些生疏... 代碼中有一個(gè)HTML事件處理程序，

function clickHandler(e) {
  console.log(e.target);
}

剛開(kāi)始都沒(méi)注意有啥錯(cuò)，然后在函數(shù)中e.target等都會(huì)報(bào)錯(cuò):ReferenceError: e is not defined

很明顯，傳入的事件對(duì)象參數(shù)是錯(cuò)誤的，在HTML事件處理程序的情況下正確的做法是傳入完整的event名稱(chēng)，

其實(shí)event可以看作是window.event的簡(jiǎn)寫(xiě)，用window對(duì)象的其他屬性試驗(yàn)下就可以發(fā)現(xiàn)，比如用location，, 那么函數(shù)中e.href即可打印出當(dāng)前鏈接。

function clickHandler(e) {
  console.log(e.href);
}

思考

其實(shí)上面本來(lái)不是個(gè)問(wèn)題，主要平時(shí)很少用行內(nèi)的HTML事件處理程序，所以隨手把參數(shù)event寫(xiě)錯(cuò)為了e。在DOM0和DOM2級(jí)事件處理程序中，瀏覽器都會(huì)將一個(gè)event對(duì)象傳入到事件處理程序中，這種用js指定的事件處理程序的形參當(dāng)然可以隨便命名了，一般簡(jiǎn)寫(xiě)為e了。

DOM0

仍然用上面的聲明函數(shù)：

function clickHandler(e) {
  console.log(e.target);
}

document.getElementsByTagName("button")[0].onclick = clickHandler;

準(zhǔn)確的打印出了button元素。

其實(shí)還可以將事件處理函數(shù)定義為無(wú)參函數(shù)，可以用arguments來(lái)獲取事件對(duì)象。

function clickHandler1() { //無(wú)參處理函數(shù)
  var e = arguments[0];
  console.log(e.target);
}

DOM2

最常用的就是dom2級(jí)事件處理程序了：

document.getElementsByTagName("button")[0].addEventListener("click", clickHandler, false );

同樣也可以使用無(wú)參函數(shù)

document.getElementsByTagName("button")[0].addEventListener("click", clickHandler1, false );

匿名函數(shù)時(shí)候需要注意的

DOM1和2級(jí)事件處理程序也常用匿名函數(shù)的方式：

document.getElementsByTagName("button")[0].onclick = (e) => {
  console.log(e.target);
}

這樣傳入event參數(shù)的有參匿名函數(shù)是沒(méi)有問(wèn)題的，但是如果用無(wú)參函數(shù)的話下面代碼就會(huì)報(bào)錯(cuò)出問(wèn)題：

document.getElementsByTagName("button")[0].onclick = () => {
  var e = arguments[0];
  console.log(e.target);
}

根據(jù)MDN上描述，arguments不能使用箭頭函數(shù)，因?yàn)榧^函數(shù)沒(méi)有自己的this，使用的是封閉執(zhí)行作用域的this。
但是若非要使用arguments的話可以傳入...args：

document.getElementsByTagName("button")[0].onclick = (...args) => {
  var e = args[0];
  console.log(e.target);
}

事件處理程序傳遞多個(gè)參數(shù)

在最早的HTML事件處理程序中我們可以直接傳入多個(gè)參數(shù)，

但是DOM0和2級(jí)事件處理程序默認(rèn)只傳入event參數(shù)，可以采用閉包的方法(IIFE)來(lái)處理：

document.getElementsByTagName("button")[0].addEventListener("click", (function(a, b) {
    return function(e) {clickHandler(e, a, b); };
}) ("a", "b"), false);

event.target和event.currentTarget

既然都寫(xiě)了事件處理程序順便再?gòu)?fù)習(xí)下這兩個(gè)的區(qū)別，target是事件的實(shí)際目標(biāo)，currentTarget是處理事件的元素，也就是綁定事件函數(shù)的元素，事件處理函數(shù)中this的值等于currentTarget。

在線演示

在線demo

參考資料

js高級(jí)程序設(shè)計(jì)（第三版）

Javascript event handler with parameters