Teilen leistungsstarker Tools mithilfe von an HTML-Elemente gebundenen Ereignismethoden

WEB-Standards befürworten die Trennung von Struktur, Leistung und Verhalten Jetzt übernehmen immer mehr Menschen diese Methode von Leistung und Verhalten, aber sie bringt auch einige Probleme für unsere Entwicklung und das Debuggen mit sich Seite geladen wird, Stacking JavaScript, ist es für uns schwierig herauszufinden, welches Element und welche Aktion letztendlich an das Ereignis gebunden ist, insbesondere an das JavaScriptLadeereignis auf verschiedene Arten, die transparent sein können Durch jQuery, element.click = function() { }, element.addEventListener()... ist es schwierig, alle Ereignisse an einem einzigen Ort zu finden. Wenn wir die Einzelheiten des Vorfalls nicht herausfinden können, wird es etwas schwierig, das Verhalten hinter einer bestimmten Klickaktion zu verfolgen, bis wir auf die folgenden zwei scharfsinnigen Tools stoßen.

Chrome Developer Tools hat die Funktion, HTML-Element Bindungsereignisse anzuzeigen, wie unten gezeigt:

Aber es ist immer noch etwas schwierig, Ereignisse auf diese Weise anzuzeigen, bis Sie auf das Chrome-Plugin Chrome Web Store - Visual Event stoßen

Die Funktionsweise von Visual Event Das Prinzip besteht darin, dass es mit dem Ereignismechanismus der wichtigsten JavaScript-Bibliotheken (z. B. jQuery, YUI, ExtJS) vertraut ist und Ereignisse tiefgreifend erfassen und im Element Objekt markieren kann. Zu den derzeit unterstützten JS-Bibliotheken gehören:

DOM 0-Ereignisse
jQuery 1.2+
YUI 2
MooTools 1.2+
Prototype 1.6+
Glow

Wenn aktiviert , Elemente werden mit einem blauen Block markiert und die Details des Ereignisses werden angezeigt, wenn die Maus angehalten wird. Wie im Bild unten gezeigt:

Das obige ist der detaillierte Inhalt vonTeilen leistungsstarker Tools mithilfe von an HTML-Elemente gebundenen Ereignismethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!