事件处理程序和监听程序有什么区别？
事件处理程序和监听程序有什么区别？
提问于 2011-08-04 00:03:32
JavaScript中的事件处理程序和事件侦听程序有什么不同？当事件出现时，它们都会执行一个函数。我真的不知道什么时候使用事件处理程序，什么时候使用事件侦听器。
回答 2
Stack Overflow用户
发布于 2018-09-12 21:58:55
This site (有趣的是，它在这里有一个循环引用，其中一个评论)指出了不同的情况，人们在这里回答了什么(声明他们是相同的)；粘贴其中一个答案：
一个不同之处在于，如果为同一按钮单击添加两个事件处理程序，则第二个事件处理程序将覆盖第一个事件处理程序，并且只触发第一个事件。例如：
document.querySelector('.btn').onclick = function() {
console.log('Hello ');
};
document.querySelector('.btn').onclick = function() {
console.log('World!');
};
// This logs "World!" out to the console.但是如果您使用addEventListener，那么这两个触发器都将运行。
document.querySelector('.btn').addEventListener('click', function() {
console.log('Hello ');
});
document.querySelector('.btn').addEventListener('click', function() {
console.log('World!');
});
// This logs "Hello" and "World!" out to the console.Stack Overflow用户
发布于 2019-12-19 21:34:30
它们都用于在事件发生时关联一个函数，如果使用事件侦听器，您可以在指定的事件(重复)中侦听不止一次，例如，侦听两个“单击”事件到独立的事件侦听器，但在使用处理程序时，这是不可能的，因为处理程序是您的dom对象的属性，并且如果在同一事件处理程序中多次分配一个函数，例如，当设置为onClick事件的元素处理程序时，最后一个事件处理程序分配为work。
myElement= document.querySelector('#btn');
myElement.onClick = function(){
alert('first event handler');
}
myElement.onClick = function(){
alert('second event handler');
}
// result : occur last handler >> alert('second event handler');
but if using the event listeners you can listen to how many times listen to the same
event.
myElement.addEventListener('click',()=>{
alert('first listener')
})
myElement.addEventListener('click',()=>{
alert('second listener')
})
/* result : occur both listeners - alert('firstlistener') >> and next >> alert('second
listener'); */页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6929528
复制相关文章
相似问题