Partage d'outils puissants utilisant des méthodes événementielles liées aux éléments HTML

Les standards WEB prônent la séparation de la structure, des performances et du comportement. Aujourd'hui, de plus en plus de personnes adoptent cette méthode de performance et de comportement, mais cela pose également quelques problèmes à notre développement et à notre débogage. page est chargée, Stacking JavaScript, il nous est difficile de savoir quel élément et quelle action est finalement lié à l'événement, notamment à l'événement JavaScriptloading de diverses manières, qui peuvent être transparentes Grâce à jQuery, element.click = function() { }, element.addEventListener()..., il est difficile de trouver tous les événements en un seul endroit. Si nous ne parvenons pas à comprendre les tenants et les aboutissants de l'incident, il devient un peu difficile de suivre le comportement derrière une certaine action de clic, jusqu'à ce que nous rencontrions les deux outils pointus suivants.

Chrome Developer Tools a pour fonction d'afficher les éléments HTML les événements de liaison , comme indiqué ci-dessous :

Mais il est encore un peu difficile de visualiser les événements de cette manière jusqu'à ce que vous rencontriez le plug-in Chrome Chrome Web Store - Visual Event

Le fonctionnement de Visual Event Le principe est qu'il connaît le mécanisme d'événements des principales bibliothèques JavaScript (telles que : jQuery, YUI, ExtJS), et peut capturer en profondeur les événements et les marquer sur l'élément objet . Les bibliothèques JS actuellement prises en charge incluent :

Événements DOM 0
jQuery 1.2
YUI 2
MooTools 1.2
Prototype 1.6
Glow

Une fois activés, Elements sera sera marqué d'un bloc bleu et les détails de l'événement seront affichés lorsque la souris est en pause. Comme le montre l'image ci-dessous :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!