Как создать прослушиватель onClick для любого объекта DOM в JS/chrome API

Я хотел бы использовать chrome API (JavaScript) для создания простого инспектора DOM (вы знаете инспектора DOM из инструментов разработчиков Firefox, где вы можете щелкнуть элемент DOM, и он отобразит некоторую информацию об элементе). Я использую не браузер Chrome напрямую, а chrome API, который используется Firefox. Я знаю, как связать событие с элементом, используя addEventListener следующим образом:

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

Но целью в приведенном выше коде является некоторый указанный элемент. Мой вопрос в том, как реализовать идею, когда я не знаю, какой элемент будет нажат. Я имею в виду, должен ли я привязывать слушателя ко всем элементам DOM? Надеюсь, есть какое-то лучшее, более простое и универсальное решение для этого. Я добавляю тег API google-chrome, потому что считаю, что реализация в веб-расширениях Firefox должна быть такой же, как в Chrome.


javascript google-chrome dom firefox-addon-webextensions
person John Boe    schedule 19.07.2016    source источник
comment
Привяжите прослушиватель событий к документу   -  person Dave    schedule 19.07.2016
comment
Возможный дубликат Что такое делегирование события DOM?   -  person Dave    schedule 19.07.2016

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете просто привязать один глобальный прослушиватель кликов:

document.addEventListener('click', function(e) {
  var element = e.target;
  // do anything you want with the element clicked
  console.log(element);
});
person floribon    schedule 19.07.2016
comment
Большое спасибо. - person John Boe; 19.07.2016

arrow_upward
1
arrow_downward

Просто фиксируйте все клики по документу, для этого используется 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

person Ben Davison    schedule 19.07.2016
comment
Большое спасибо. Я делаю это для FF 48, поэтому IE не будет его использовать. - person John Boe; 19.07.2016