javascript - 无论如何要在一个按钮上使用来自两个不同脚本的两个 .onclick 事件处理程序？

Question

当事件处理程序存储在两个不同的脚本中时，是否可以在同一个按钮上使用两个 .onclick 事件处理程序？我知道将我需要的两个函数调用到同一个 .onclick 处理程序中很容易，但我很好奇是否有办法解决这个问题。

假设我有

script1.js

someButton.onclick = function() {
    someFunction1();

}

script2.js

someButton.onclick = function() {
    someFunction2();

}

按此顺序在 html 中运行这些脚本将导致调用 someFunction2() onclick，因为我假设按钮的功能被 script2.js 覆盖。

Answer 1

您可以使用addEventListener，这会将两个事件处理程序添加到元素中，而不是替换onclick元素的属性。

someButton.addEventListener('click', function() {
   someFunction1();

});
someButton.addEventListener('click', function() {
   someFunction2();

});

小提琴

Answer 2

addEventListener是去这里的方式，但如果你坚持使用someButton.onclick，我会这样做：

var old = someButton.onclick;

someButton.onclick = function (event) {
    if (typeof old === 'function') {
        old.call(someButton, event); // call the old listener
    }

    someFunction2(); // run new code
};

它保存了对旧 onclick 函数的引用，并创建了一个新的 onclick 函数，它不仅会调用旧的 onclick 函数，还会运行您想要的任何其他代码。