[JavaScript] 노마드코더 바닐라JS 챌린지 6일차 복습 중 -(2)

console.log로는 출력 그대로만 해주지만

console.dir은 element의 내부까지 출력해줄 수 있다.

 

 

style element는 JS 형식으로 CSS 대신 수정해줄 수 있다. 하지만 style은 CSS에서 수정해주는 것이 좋다.

 

JS는 event를 listen 해줄 수 있다는 게 진짜 혁명인듯

 

원래 function 실행은 (function)() 괄호를 해줘야 실행인데

element.addEventListener("click",function); 을 통해서 event가 발생할 때 JS가 알아서 실행해주도록 한다.

그리고 여기 function은 ()괄호를 넣지 않는 것이 중요

 

각 tag등이 어떤 element를 가지고 있는지는 MDN으로 검색해서 찾을 수 있다. Web API

 

 

element.addEventListener("click",function);

element.onclick = function;

둘은 같은 기능을 해준다 하지만 addEventListener가 더 좋다. 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문이다.

 

 3.6~3.8은 깃헙에 올려놓은 주석으로 공부가 되어있다

 

 

 

중요한 포인트들만

 

step1. element를 찾아라

step2. event를 listen해라

step3. step2 event에 반응하라

중요한 3가지 스텝

 

className은 class 이름을 교체버리고

classList는 class들의 목록으로 작업할 수 있게 허용해주기때문에  추가삭제추가삭제 해주는 장점이 있어서 List가 낫다

 

3.8 결론에서 앞에서 한 온갖 쇼들이 결국 classList.toggle로 구현되는게 충격이었다.

이러한 library들을 잘 활용해야 코테에도 좋겠지