크롬 개발자 도구 기능 사용하기 #2 : 이벤트 관련 기능


1. 엘리먼트에 걸려있는 이벤트 목록 보기


네이버 페지를 예로 들면 검색어 입력창은 query 라는 id를 가지고 있다.

검색어 입력창에 어떤 이벤트들이 걸려 있는지 알아볼려면


var txt = document.querySelector('#query')
getEventListeners(txt)

요렇게 해서 보면 검색어 입력창에는 blur, click, focus, keydown, keyup 이벤트가 걸려 있는것을 알 수 있다.








2. 엘리먼트에서 발생하는 이벤트 모니터링


네이버 검색어 입력창에서 발생하는 이벤트를 모니터링 하기 위해서는 요렇게 하면 된다.


click, keyup 이벤트를 모니터링 하려면

monitorEvents(txt, ['click', 'keyup'])


발생하는 모든 이벤트를 모니터링 하려면 요렇게

monitorEvents(txt)








3. 이벤트 모니터링 끄기

모니터링 하던것을 끄려면 요렇게~


unmonitorEvents(txt)


Trackback 0 Comment 1
  1. IT세레스 2015.12.15 17:37 신고 address edit & del reply

    저도 구글 개발 도구를 많이 이용합니다.
    이벤트 관련 기능이 있어서 보다 더 편리하게 모니터링이 되니 저도 참고해서 알려주신대로 사용해 보겠습니다.^^

prev 1 ··· 11 12 13 14 15 16 17 18 19 ··· 223 next