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

});

<强> Fiddle

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函数，还可以运行你想要的任何其他代码。

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

2 个答案: