jQuery에서 설정한 클릭 이벤트 등을 정의하는 위치를 찾는 방법

크롬 등 현대 브라우저라면 개발자 도구, 자바스크립트 디버깅 등도 쉽게 할 수 있다.예를 들어 어떤 단추에서 자바스크립트로 클릭 이벤트를 설정한 경우에도 무엇을 설정했는지 확인할 수 있다.

개발자 도구를 사용하여 이벤트 내용 보기

<div id="click1">click1</div>

<script>
var click1 = document.getElementById('click1');

click1.addEventListener('click', function() {
    console.log('click1');
});
</script>

Command+Option+i 바로 가기를 통해 시작합니다

조사할 요소를 선택하고 오른쪽에 있는 패널 "Event Listeners"를 선택합니다

오른쪽 끝에 있는 필터 같은 아이콘을 선택하고'Selected Node Only'를 선택하면 방해 요소가 없어 가볍다

click 이벤트에서 아래로 뚫으면handler에서 함수를 확인할 수 있습니다

헉console.log('b') 응.

JQuery 상황에서... 안 보여요.

jQuery를 사용하지 않는 활동이라면 간단하게 내용을 확인할 수 있지만 jQuery는 그리 간단하지 않다.내부적으로 이벤트 탐지기를 처리하기 때문에 DOM의 이벤트 탐지기에 들어가지 않습니다.

<div id="click1">click1</div>

<script>
jQuery('#click1').click(function() {
    console.log('click1');
});
</script>

확실히, 무슨 행사가 있는데... 하지만 jQuery...

콘솔에서 컨텐츠 확인

콘솔 탭을 선택하여 콘솔을 표시하고 다음 코드를 입력하십시오.

$._data($("#click1").get(0), "events");

그래서 아까 Event Listeners에 표시된 것처럼.그중의 hander:function ()...오른쪽 단추로 클릭한 부분을 선택하고 표시 함수 정의를 선택하면 해당하는 코드로 이동할 수 있습니다.

이렇게 하면 행복할 수 있다.