Question

我想听动态创建但未附加的元素的click事件。参见以下示例：

document.addEventListener('click', function(e){
  if(e.target.tagName == 'BUTTON'){
    console.log('Click');
  }
});
document.createElement('button').click();

<button>Test</button>

在创建元素并对其使用click方法时，不会调用侦听器。

这是为什么，我如何收听这些事件？

谢谢！

Answer 1

如评论中所述，要么覆盖HTMLButtonElement.prototype.click：

const nativeClick = HTMLButtonElement.prototype.click;
HTMLButtonElement.prototype.click = function(...args) {
  console.log('Click');
  nativeClick.apply(this, args);
};

document.createElement('button').click();

或者，一种稍有不同（且效率较低）的方法是覆盖Document.prototype.createElement，以使新创建的button获得与它们关联的侦听器：

const nativeCreateElement = Document.prototype.createElement;
Document.prototype.createElement = function(...args) {
  const createdElement = nativeCreateElement.apply(this, args);
  if (typeof args[0] === 'string' && args[0].toLowerCase() === 'button') {
    createdElement.addEventListener('click', () => {
      console.log('Click');
    });
  }
  return createdElement;
}

document.createElement('button').click();

请注意，覆盖这样的重要内置对象和方法非常容易出错，并且不能在严肃的生产代码中使用-仅当您没有其他选择时才需要考虑，例如在用户脚本的异常环境中。

监听未附加元素的点击事件

1 个答案: