JavaScript 事件監聽處理器的參數傳遞語法問題

直接將函式寫在 addEventListener()的第二個參數是很常見的事件註冊語法,例如:

document.getElementById('area').addEventListener('click', function () {
alert('HELLO');
}, false);

或是你可能想將要函式獨立出來,然後再透過函式名稱進行引用,因此我們將其改寫如下:

function hello() {
            alert('HELLO');
        }

接下來只要直接指定 hello 為參數即可:

document.getElementById('area').addEventListener('click', hello, false);

假設今天有一組功能函式,想要同時註冊為兩組事件監聽處理器,只要再設定一次即可,例如:

document.getElementById('area_two').addEventListener('click', hello, false);

這種語法在寫的時候,只能直接指定函式名稱,不能配置小括弧,否則的話會直接執行,而且事件的註冊不會成功,例如以下的寫法是不可行的

document.getElementById('area').addEventListener('click', hello(), false);

現在考慮一個狀況,如果有一個函式如下:

function sayHello(name) {
alert('Hi,'name + '!');
}

在這種情形下,你當然不能將參數直接傳入,就如同上述說明的,這會導致函式直接執行,且事件註冊失敗,如下式:

document.getElementById('area').addEventListener('click', sayHello('Mary'), false);

當然,直接將函式主體寫在 addEventListener() 的第二個參數位置基本上是不能的,因為你無法直接將參數丟進去,在實際開發上是不可行,在這種情形下,我們可以轉個彎,改成如下的寫法…

document.getElementById('area1').addEventListener(
            'click', function () { sayHello('Tim') }, false);

document.getElementById('area2').addEventListener(
            'click', function () { sayHello('Sean') }, false);

在某些需要傳入函式名稱同時必須指定參數值的方法調用,可以使用此種簡單的寫法。

沒有留言: