크롬 개발자도구 팁 - 돔 이벤트 보기
들어가기 전에...사이트 분석을 하면서 돔에 걸려 있는 이벤트를 쉽게 찾기 위한 방법이 뭐가 있을까? 예전에는 웹사이트 하면 php, jsp, ...를 많이 생각했었는데, 요즘에는 react, vue, angular, ... 등등 여러 언어로 개발을 하고 있다. jsp, jquery로 되어 있는 웹에서 이벤트 찾을 때는$._data(element, 'events');위와 같이 찾았는데, 요즘에는 확장프로그램도 충분히 좋아진 건지 이제 본 건지... 개발자 도구를 좀 눌러보니 아니 이벤트 리스너(event listeners)가 있네?? 사용해보자예를 들어, 11번가에서 상품상세 화면에 "쿠폰보기"가 있다. 한번 개발자도구로 까보자.2개의 이벤트가 걸려 있는 걸 확인할 수 있다. 아! 여기서 디폴트로 상위가..
들어가기 전display는 block, none만 알고 살아왔다.jQuery는 show, hide 만 해주면 되니까.... 근데 이건 왠걸? jquery에서 제공해주는 attr 로 display 속성을 변경했는데,table 의 td tag 를 보여주고 숨기는 과정에서 문제가 발생했다. 하나의 tr에 td 태그로 나와야 할 것들이 td 태그로 나오긴 했지만, 하나의 tr에 두 줄은 무어란 말인가.... 이유인 즉슨, style 속성을 block 으로 해준 부분에서 잘못되었다. table 의 td 로 넣기 위해서는 display가 block 이 아닌 table-cell 로 해주어야 한다. 직접 테스트 해보자if("보여주고 싶을때"){$("#table_td").attr("style", "display:tabl..