在同一DOM元素上为同一事件添加多个函数/处理程序？

I'm trying to bind multiple functions to the document.onkeydown.

我正在尝试将多个函数绑定到document.onkeydown。

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


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

This of course just alerts - 2 - because the document.onkeydown gets overwritten by that second function.

这当然只是警报 - 2 - 因为document.onkeydown被第二个函数覆盖。

Example (also on jsFiddle):

示例(也在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>

How can I get it to work so ondocument.onkeydown will alert both alerts?

我怎样才能让它工作,所以ondocument.onkeydown会提醒两个警报?

4 个解决方案

#1

Use modern event handling. On any half-decent up-to-date browser that's

使用现代事件处理。在任何一半不错的最新浏览器上

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

On IE8 and earlier, or IE9-IE11 in their broken "compatibility" mode, it's:

在IE8及更早版本或IE9-IE11处于破坏的“兼容性”模式时,它是:

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

There are other differences between attachEvent and addEventListener, such as where you get the event object from. If you need to support obsolete browsers like IE8 (or IE9-IE11 in (in)compatibility mode), this answer has a function to handle almost all the differences for you.

attachEvent和addEventListener之间还有其他差异,例如从中获取事件对象的位置。如果你需要支持IE8(或(in)兼容模式下的IE9-IE11)等过时的浏览器,这个答案有一个功能来处理几乎所有的差异。

Updated snippet using addEventListener:

使用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>

Updated snippet using hookEvent from the linked answer:

使用链接答案中的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>

#2

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

Or better addEventListener and attachEvent

或者更好的addEventListener和attachEvent

#3

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);

or you can add multiple calls of

或者你可以添加多个电话

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

Try doing it this way...

试着这样做......

#4

Call the required function from the other function as below. Updated fiddle

从另一个函数调用所需的函数,如下所示。更新小提琴

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>