Heim  >  Artikel  >  Web-Frontend  >  Teilen leistungsstarker Tools mithilfe von an HTML-Elemente gebundenen Ereignismethoden

Teilen leistungsstarker Tools mithilfe von an HTML-Elemente gebundenen Ereignismethoden

高洛峰
高洛峰Original
2017-03-20 16:51:131358Durchsuche

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:

Teilen leistungsstarker Tools mithilfe von an HTML-Elemente gebundenen Ereignismethoden

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:

Teilen leistungsstarker Tools mithilfe von an HTML-Elemente gebundenen Ereignismethoden


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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn