Chrome DevTools, JavaScript Event Handling / Binding

크롬 개발자 툴을 이용하여, HTML 어디에 어느 Event 바인딩 되어있는지 알아보는 글입니다.

 

0. 크롬을 킨다.

1. 아무 사이트나 들어간다.

2. F12를 눌러 개발자 툴을 킨다.

3. 요소선택을 누른다.

4. 원하는 요소(버튼, 인풋)를 선택한다.

5. EventListeners 탭으로 이동한다.

6. 이벤트가 존재한다면 해당 이벤트와 링크를 누른다.

---

오랜만에 크롬 개발자 툴(이하 개발자 툴)을 써서 HTML을 뜯어보는 시간을 갖았습니다.

 

아주 쉽게 EventListner의 바인딩과 어떤 종류인지, 그리고 어디에 있는지도 쉽게 알 수있게되었죠.

 

구글사이트에서 크롬 개발자툴을 킨 화면

개발자 툴에서 오른쪽 'Event Listeners'를 누르면 아래쪽에 쭉 나열되어 있는것이 보입니다.

 

로그인 버튼에 어떤 event가 바인딩 되어 있는지 알아보겠습니다.

element 선택 기능으로 로그인 버튼에 mouseover한 사진

개발자 툴의 element 선택 하는 기능을 사용하여 로그인 버튼을 선택해보겠습니다.

선택한 element에 바인딩된 이벤트

Event Listener에 보면 click, keydown, keyup 3개의 리스너가 연결되어 있습니다.

 

해당 이벤트를 선택하고, Tree모양으로 나열된 링크를 눌러 보겠습니다.

이벤트 링크를 눌렀을때, JS에 바인딩된 위치를 나타내는 화면

어떤 javaScript파일의 어디에 있는지 나타내고 있습니다.

javascript를 빌드할 때, 중요한 부분은 난독화하고 압축하여 보기는 어렵게 되어있지만, addListener, removeListener 그리고 예외처리와 같이 바인딩 되어있는 것을 수 볼 수 있습니다.

 

음... 예시가 좋지 않은 관계로 국내 사이트로 진행해보겠습니다.

네이버 사이트의 이벤트 바인딩

index.html에 어떤 이벤트가 걸려있는지 보이는군요.

window.document.getElementById('search_btn').click() 

하면 바로 실행이 될것같군요.

 

디버깅 할 때 정말 유용하겠죠!?

 

P.S: 국내 사이트들은 ㅠㅠ 코드에 직관성이 정말 너무 뛰어나네요....