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被第二个函数覆盖了。

示例（also on jsFiddle）：

＆＃13;

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;

＆＃13;

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

＆＃13;

如何才能让它工作，document.onkeydown会提醒两个警报？

Answer 1

使用现代事件处理。在任何半个体面的最新浏览器

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

在IE8及更早版本或IE9-IE11中，它们已经破坏了兼容性＆＃34;模式，它是：

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

attachEvent和addEventListener之间存在其他差异，例如从中获取事件对象的位置。如果您需要支持IE8（或（in）兼容模式下的IE9-IE11）等过时的浏览器，this answer has a function to handle almost all the differences for you。

使用addEventListener更新了代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

使用链接答案中的hookEvent更新了代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

从另一个功能调用所需的功能，如下所示。更新了 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>

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

尝试这样做......

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

4 个答案: