将onclick事件转换为addEventListener

Question

我有一个锚标记，它有一个在原始HTML文档中设置的onclick事件。当我执行JavaScript例程时，我使用addEventListener添加了一个单击事件侦听器。问题是，原来的onclick事件似乎被删除或忽略。如何确保首先执行onclick事件?(没有jquery)

Answer 1

我创建了一个示例

JS:

document.querySelector('#foo').addEventListener('click', function() {
    alert('foo');
}, false);

HTML:

<h1 id="foo" onclick="alert('bar')">CLICK ME!!</h1>

http://jsfiddle.net/tzgrt8do/

一切正常

Answer 2

使用addEventListener添加侦听器应该不会影响现有的侦听器，但是您无法控制调用它们的顺序。要确保现有侦听器和新侦听器的顺序，您可以这样做:

function addListener(element, newListener) {
  var oldListener;
  if (typeof element.onclick == 'function') {
    oldListener = element.onclick;
    element.onclick = function() {
      oldListener.call(this);
      newListener.call(this);
    };
  } else {
    element.onclick = newListener;
  }
  element = null;
}

这只适用于现有的侦听器作为属性添加(在HTML中或通过赋值)，而不是使用addEventListener或IE的旧attachEvent添加。

如果你需要传递参数，你可能需要一些更复杂的东西