[]如何附加事件侦听器？

Question

在hyperapp代码库，我们可以看到行：

https://github.com/hyperapp/hyperapp/blob/master/src/app.js#L135

表示：

try { 
    element[name] = value 
    } catch (_) {} 

显然，element是HTML元素和value是一个功能！这里有趣的部分是，如果name说例如onclick和value是一个函数，它不会打印某些东西给控制台，上面的代码正确地添加了onclick的事件侦听器。

我想知道这是否是addEventListener的简写，或者我在这里错了吗？

Answer 1

我想知道这是否是一个短手addEventListener ...

号就这么早是老DOM0风格事件处理。如果您将功能分配给element.onclick或element.onmouseover等，它将该功能设置为事件处理程序。

这与addEventListener有什么不同呢是只有一个功能可以这样设置;如果您第二次使用第二个功能，则会取代第一个功能。相比之下，addEventListener可以用来与其他人很好地玩，允许多个处理程序。

（另一个区别是，onxyz风格的旧IE浏览器，它不支持addEventListener工作[但没有支持它的微软只前身attachEvent]。因此，老跨浏览器的代码，会经常使用onxyz风格，如果FWIW，如果你仍然需要支持IE8或IE9-IE11破坏的“兼容模式”，你可以使用this answer中的hookEvent功能，如果可能，使用addEventListener或attachEvent。）

Answer 2

这是排序addEventListener的简写，但与一个主要缺点：你只能有一个处理程序。

function firstHandler() { 
 
    console.log('#1'); 
 
} 
 

 
function secondHandler() { 
 
    console.log('#2'); 
 
} 
 

 
let onclickEl = document.getElementById('onclick'); 
 
let addEventListenerEl = document.getElementById('addEventListener'); 
 

 
// We can bind multiple event handlers using addEventListener 
 
addEventListenerEl.addEventListener('click', firstHandler); 
 
addEventListenerEl.addEventListener('click', secondHandler); 
 

 
// But watch what happens when we do the same with onclick 
 
onclickEl.onclick = firstHandler; 
 
onclickEl.onclick = secondHandler;

<button id="addEventListener">addEventListener</button> 
 
<button id="onclick">onclick</button>

出于这个原因，在自己的代码，我建议使用总是addEventListener。