如何为 JS/chrome API 中的任何 DOM 对象创建 onClick 侦听器

Question

我想使用 chrome API (JavaScript) 创建简单的 DOM 检查器（你知道 Firefox 开发者工具中的 DOM 检查器您可以在其中单击 DOM 元素，它将显示有关该元素的一些信息）。我不是直接使用 Chrome 浏览器，而是 chrome API Firefox 使用的浏览器。我知道如何使用 addEventListener 将事件与元素绑定，如下所示：

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted]); // Gecko

但是上面代码中的目标是一些指定的元素。我的问题是当我不知道将点击哪个元素时如何实现这个想法。我的意思是，我应该将侦听器绑定到所有 DOM 元素吗？希望有一些更好、更简单和通用的解决方案。我添加了 google-chrome API 标签，因为我认为 Firefox webextensions 中的实现应该类似于 Chrome.

Answer 1

您可以只绑定一个全局点击监听器：

document.addEventListener('click', function(e) {
  var element = e.target;
  // do anything you want with the element clicked
  console.log(element);
});

Answer 2

只捕获文档的所有点击，这种方式使用jquery，但也可以在纯js中完成。然后使用 event.target 见下面的代码。我还包括 ie6-7 支持。

$(document).click(function(e) {
  // Support IE6-8
  var target = e.target || e.srcElement;
  console.log(target)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>blah blah blah div 1</div>
<span>blah blah blah span 1</span>
<p>blah blah blah p 1</p>

MDN reference

如何为 JS/chrome API 中的任何 DOM 对象创建 onClick 侦听器

How to create onClick listener to any DOM object in JS/chrome API

javascript

dom

google-chrome

firefox-addon-webextensions