HTML 요소에 바인딩된 이벤트 메서드를 사용하여 강력한 도구 공유

WEB 표준은 구조, 성능 및 동작의 분리를 옹호합니다. 이제 점점 더 많은 사람들이 이러한 성능 및 동작 방법을 채택하고 있지만, 이는 또한 웹 개발 및 디버깅에 몇 가지 문제를 가져옵니다. 페이지가 로드되고 JavaScript가 쌓이면 어떤 요소와 어떤 액션이 최종적으로 이벤트에 바인딩되는지 파악하기 어렵습니다. 특히 JavaScript로딩 이벤트는 더욱 그렇습니다. jQuery, element.click = function() { }, element.addEventListener()...를 통해서는 모든 이벤트를 한 곳에서 찾기가 어렵습니다. 사건의 내용을 자세히 파악할 수 없으면 다음 두 가지 날카로운 도구를 만날 때까지 특정 클릭 동작 뒤에 있는 동작을 추적하는 것이 약간 어려워집니다.

Chrome 개발자 도구에는 아래와 같이 HTML 요소 바인딩 이벤트를 볼 수 있는 기능이 있습니다.

하지만 크롬 플러그인 크롬 웹 스토어 - 비주얼 이벤트

비주얼 이벤트 작동을 만나기 전까지는 이런 방식으로 이벤트를 보기가 여전히 조금 어렵습니다. 원칙은 주요 JavaScript 라이브러리(예: jQuery, YUI, ExtJS)의 이벤트 메커니즘에 익숙하고 이벤트를 심층적으로 캡처하여 개체 요소에 표시할 수 있다는 것입니다. 현재 지원되는 JS 라이브러리는 다음과 같습니다.

DOM 0 events
jQuery 1.2+
YUI 2
MooTools 1.2+
Prototype 1.6+
Glow

활성화된 경우 , 요소는 파란색 블록으로 표시되며 마우스를 일시 정지하면 이벤트 세부 정보가 표시됩니다. 아래 사진과 같습니다.

위 내용은 HTML 요소에 바인딩된 이벤트 메서드를 사용하여 강력한 도구 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!