개발Tip 개발자도구 Element의 이벤트 목록

개발을 하다 보면 특정 요소에 걸려있는 이벤트를 찾고 싶을 때가 자주 있습니다.

모든 소스를 기억하는것도 아니고 그 당시에 어떻게 이벤트를 걸었는지 기억나지 않기 때문에

무수한 자바스크립트 코드들 사이에서 이벤트를 찾는 것은 쉽지 않습니다.

 

그럴 때 사용할 수 있는 것이 바로 개발자 도구의 Event Listeners 탭입니다.

 

개발자도구 Event Listeners 사용하기

사용법은 굉장히 간단합니다.

1. 개발자도구(F12)를 연 상태에서 엘리멘트를 선택합니다.

2. 개발자도구에 Elements탭 내부 세부 탭에서 Event Listners 탭을 선택합니다.

3. 해당 탭 내에서 선택한 엘리멘트에 대한 이벤트 목록을 확인할 수 있습니다.

4. 이벤트 목록을 선택하면 해당 이벤트가 어느 파일 어느 위치에서 정의되었는지 위치 또한 확인할 수 있습니다.

개발자도구 Event Listeners

 

위 도구를 사용하시면 이벤트를 찾아가는 것이 한결 쉬워질 것입니다.

유용하게 사용하시고 편하게 코딩하시기 바랍니다^^