Question

我有一个锚标记，其中包含在原始HTML文档中设置的onclick事件。当我执行JavaScript例程时，我使用addEventListener添加了一个click事件监听器。问题是，原始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旧的< EM>的attachEvent

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

将onclick事件转换为addEventListener

2 个答案: