在同一DOM元素上為同一事件添加多個函數/處理程序？

Question

我正在嘗試將多個功能綁定到document.onkeydown 。

function keydownScreenHandler_1(event) {
  alert('- 1 -');
}
document.onkeydown=keydownScreenHandler_1;


function keydownScreenHandler_2(event) {
  alert('- 2 -');
}
document.onkeydown=keydownScreenHandler_2;

當然，這只是alerts - 2 -因為document.onkeydown被第二個函數覆蓋。

示例（ 也在jsFiddle上 ）：

 function keydownScreenHandler_1(event) { alert('- 1 -'); } //Register the keydown event handler: document.onkeydown=keydownScreenHandler_1; function keydownScreenHandler_2(event) { alert('- 2 -'); } //Register the keydown event handler: document.onkeydown=keydownScreenHandler_2; 

 <h1> Click here to get focus, then press a key </h1> 

我如何才能使其在document.onkeydown上正常工作，將同時提醒這兩個警報？

Answer 1

使用現代事件處理。 在任何最新的瀏覽器上

document.addEventListener("keydown", keydownScreenHandler_1, false);
document.addEventListener("keydown", keydownScreenHandler_2, false);

在IE8和更早版本或IE9-IE11處於中斷的“兼容”模式下，它是：

document.attachEvent("onkeydown", keydownScreenHandler_1);
document.attachEvent("onkeydown", keydownScreenHandler_2);

attachEvent和addEventListener之間還有其他區別，例如從何處獲取事件對象。 如果您需要支持IE8（或（處於（兼容）模式下的）IE9-IE11）這樣的過時瀏覽器，則此答案具有為您處理幾乎所有差異的功能 。

使用addEventListener更新了代碼段：

 function keydownScreenHandler_1(event) { alert('- 1 -'); } //Register the keydown event handler: document.addEventListener("keydown", keydownScreenHandler_1, false); function keydownScreenHandler_2(event) { alert('- 2 -'); } //Register the keydown event handler: document.addEventListener("keydown", keydownScreenHandler_2, false); 

 <h1> Click here to get focus, then press a key </h1> 

使用鏈接的答案中的hookEvent更新了代碼段：

 var hookEvent = (function() { var div; // The function we use on standard-compliant browsers function standardHookEvent(element, eventName, handler) { element.addEventListener(eventName, handler, false); return element; } // The function we use on browsers with the previous Microsoft-specific mechanism function oldIEHookEvent(element, eventName, handler) { element.attachEvent("on" + eventName, function(e) { e = e || window.event; e.preventDefault = oldIEPreventDefault; e.stopPropagation = oldIEStopPropagation; handler.call(element, e); }); return element; } // Polyfill for preventDefault on old IE function oldIEPreventDefault() { this.returnValue = false; } // Polyfill for stopPropagation on old IE function oldIEStopPropagation() { this.cancelBubble = true; } // Return the appropriate function; we don't rely on document.body // here just in case someone wants to use this within the head div = document.createElement('div'); if (div.addEventListener) { div = undefined; return standardHookEvent; } if (div.attachEvent) { div = undefined; return oldIEHookEvent; } throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser."; })(); function keydownScreenHandler_1(event) { alert('- 1 -'); } //Register the keydown event handler: hookEvent(document, "keydown", keydownScreenHandler_1, false); function keydownScreenHandler_2(event) { alert('- 2 -'); } //Register the keydown event handler: hookEvent(document, "keydown", keydownScreenHandler_2, false); 

 <h1> Click here to get focus, then press a key </h1> 

Answer 2

從另一個函數中調用所需的函數，如下所示。 更新的小提琴

 function keydownScreenHandler_1(event) { alert('- 1 -'); keydownScreenHandler_2(event); } function keydownScreenHandler_2(event) { alert('- 2 -'); keydownScreenHandler_3(event); } function keydownScreenHandler_3(event) { alert('- 3 -'); } //Register the keydown event handler: document.onkeydown = keydownScreenHandler_1; 

 <h1> Click here to get focus </h1> 

Answer 3

document.onkeydown = function() {
    keydownScreenHandler_1.apply(this, arguments);
    keydownScreenHandler_2.apply(this, arguments);
}

或者更好的addEventListener和attachEvent

Answer 4

function keydownScreenHandler_1(event) {
  alert('- 1 -');
}

function keydownScreenHandler_2(event) {
  alert('- 2 -');
}

function keydownHandlers(event) {
  keydownScreenHandler_1(event);
  keydownScreenHandler_2(event);
}

document.addEventListener("keydown", keydownHandlers, false);

或者您可以添加多個呼叫

document.addEventListener("keydown", function_name, false);

嘗試以這種方式做...