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

Question

在hyperapp代码库中,我们能够看到这一行:

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

这表现了:

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

显然,element是一个HTMLElement,value是一个功能!这里有趣的部分是,如果name说是例如onclick并且value是一个向控制台输出内容的函数,上面的代码正确地添加了事件监听器onclick.

我想知道这是否是一个简短的手addEventListener或我错在这里？

Answer 1

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

不,这是旧的DOM0风格事件处理早于它.如果将函数分配给element.onclick或element.onmouseover等,则将该函数设置为事件处理程序.

有什么不同之addEventListener处在于只能通过这种方式设置一个功能; 如果你第二次使用第二个函数,它将替换第一个函数.相比之下,addEventListener可以用来与其他人很好地玩,允许多个处理程序.

(另一个不同之处在于这种onxyz风格适用于旧的IE,它不支持addEventListener[但确实支持其仅限Microsoft的前任attachEvent].所以旧的跨浏览器代码经常使用onxyz-style如果与其他人玩得很好就没有必要.FWIW,如果你仍然需要在破解的"兼容模式"中支持IE8或IE9-IE11,你可以使用这个答案中的hookEvent功能,该功能使用addEventListener或者attachEvent如果可能的话.)