MDN web Docs 바로가기

"이벤트, 너의 목소리가 들려~"

addEventListener - 이벤트 리스너

argument: (event, function)

• 마우스 클릭, 키보드 입력 등 웹 상에서 발생하는 동작들인 이벤트가 일어나면, 브라우저는 이벤트 리스너의 두번째 인수인 function을 호출한다.
• function은 '개발자가 직접 실행하지 않는다.'는 것이 중요함❗️ -> 이벤트 발생에 따라 브라우저가 함수를 호출하고 그에 따라 실행되는 것.
  ↳ addEventListener(event, function()) ← 이렇게 괄호까지 작성하면 함수가 바로 실행된다.

이벤트 리스너의 함수는 실행된 event를 argument로 전달 받아 읽을 수 있다. object 타입으로 그 이벤트에 대한 여러 정보가 담겨 있어 필요에 따라 활용하면 된다.

preventDefault

: 해당 이벤트가 가진 기본 동작(ex - submit의 새로고침)이 발생하지 않도록 막는다.

classList - 요소의 class를 토큰리스트로 반환

💡 The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

• contains : class 리스트에 포함되어 있는지를 boolean으로 반환
• remove : argument로 들어가는 class를 제거
• add : argument로 들어가는 class를 추가
• toggle : 포함되어 있다면 remove, 아니면 add(위의 세 함수를 한 큐에)