[英]Adding event listeners to multiple elements
我现在已经好几个小时了。
我想在页面上的所有<select>
添加一个事件监听器,到目前为止我已经得到了这段代码:
onload = function(e) {
sels = document.getElementsByTagName('select');
for(i=0; i<sels.length; i++) {
sels[i].addEventListener('change', alert('test!'), false);
}
}
这仅在加载页面时触发警报,而不是在我更改任何<select>
的值时触发警报。
我可以在正确的方向上轻推吗? :-)
在您的示例中立即调用alert()
函数时,您需要有匿名函数:
... .addEventListener('change', function() { alert('test!')}, false ...
现在根据你的代码, addEventListener
尝试添加undefined
结果(return of alert()
函数)。
或者您可以为此传递函数处理程序:
function alertMe() {
alert( 'test!' );
}
...
... .addEventListener('change', alertMe, false ...
注意:通过somefunction(arg[, arg...])
调用你引用不是函数,而是函数返回。
除了将alert
包装在函数中之外,如前所述,不要在循环的每次迭代中使用getElementsByTagName
:
onload = function(e) {
sels = document.getElementsByTagName('select');
for(i=0; i<sels.length; i++) {
sels[i].addEventListener('change', function(){alert('test!')}, false);
}
}
你有保存到变量的select
元素列表,没有必要,更不用说get
所有这些元素的低效率,每次循环迭代。
我创建了以下简单函数,它迭代匹配selector
所有元素,并使用传递的handler
为event
添加事件侦听selector
。
这是jQuery的$(selector).on(event, handler)
类似功能
function addEventListeners(selector, event, handler, useCapture){
useCapture = useCapture || false;
Array.prototype.forEach.call(
document.querySelectorAll(selector)
,function(el, ix) {
el.addEventListener(event, handler, useCapture);
}
);
}
所以对于OP来说,使用这个函数的方式是这样的:
addEventListeners("select", "change", function(evt){ console.log(evt); });
另请参阅我对当前和未来元素的事件监听器的回答
您正在立即执行alert()函数,您需要将addEventListener函数作为函数传递,因此:
onload = function(e) {
sels = document.getElementsByTagName('select');
for(i=0; i<sels.length; i++) {
document.getElementsByTagName('select')[i].addEventListener('change', function () { alert('test!'); }, false);
}
}
事件冒泡是javascript中的重要概念,因此如果您可以直接在DOM上添加事件,则可以保存一些代码行:
document.addEventListener('change', function(e){
if(e.target.tagName=="SELECT"){
alert('SELECT CHANGED');
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.