避免在JavaScript中执行elem.onclick覆盖操作

Avoid elem.onclick override action in JavaScript

本文关键字：elem onclick 覆盖 操作 执行 JavaScript      更新时间：2023-09-26

我有一个关于onclick的JavaScript行为的问题。我有两个JavaScript类，它们初始化元素中的onclick函数，但当我在同一个html元素上应用onclick初始化器时，只能使用最后一个onclick函数，我不理解这种行为。我在一个简单的例子中测试了相同的情况，结果是相同的。下面是我的示例代码，它具有这种奇怪的行为：

window.onload = function ()
    {
        var testElem = document.querySelector('#test_element');
        test_element.onclick = function ()
        {
            alert('one');
        }
        test_element.onclick = function ()
        {
            alert('two');
        }
    }

这是我的HTML

<div id="test_element">click here to test_element</div>

当我点击触发器时，我需要抛出两个警报"；一个"；以及"；两个"；但似乎第二个优先于第一个。有人能帮我解决这个问题吗？

使用addEventListener，它可以处理同一事件的多个处理程序：

test_element.addEventListener('click', function(){
    alert('one');
}, false);
test_element.addEventListener('click', function(){
    alert('two');
}, false);

onclick属性（也称为内联）仅支持单个处理程序。

您正在寻找addEventListener(eventName, handler)，这是在JS中添加处理程序的正确方法。

它将允许您添加任意数量的处理程序。

相关文章：