So erstellen Sie onClick Listener zu einem beliebigen DOM-Objekt in JS/chrome API

Question

Ich würde gerne Chrome-API (JavaScript) verwenden, um einfache DOM-Inspektor zu erstellen (Sie kennen den DOM-Inspektor von Firefox-Entwickler-Tools, wo Sie auf DOM-Element klicken und Es werden einige Informationen über das Element angezeigt. Ich verwende nicht direkt den Chrome-Browser, sondern die Chrome-API, die von Firefox verwendet wird. Ich weiß, wie Ereignis zu binden, mit Element wie folgt mit addEventListener:

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

Aber das Ziel in dem obigen Code ist einige angegebene Element. Meine Frage ist, wie man die Idee implementiert, wenn ich nicht weiß, welches Element angeklickt wird. Ich meine, sollte ich den Listener an alle DOM-Elemente binden? Hoffentlich gibt es dafür eine bessere, einfachere und universellere Lösung. Ich füge das Google-Chrome-API-Tag hinzu, weil ich denke, dass die Implementierung in Firefox-Webextensions ähnlich wie in Chrome sein sollte.

Answer 1

Sie können nur einen globalen Klick Hörer binden:

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

Answer 2

einfach alle Klicks auf dem Dokument erfassen, auf diese Weise verwendet Jquery, aber es kann auch in reiner js erfolgen. Verwenden Sie dann event.target siehe Code unten. Ich habe auch IE6-7-Unterstützung aufgenommen.

$(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