我有一个关于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中添加处理程序的正确方法。
它将允许您添加任意数量的处理程序。