[JS] EventListener (click, mouseenter, mouseleave, contextmenu, resize)

EventListener는 유저의 동작(event)을 감지한다.

EventListener에는 여러가지가 있지만 제목에 있는 이벤트를 배웠으므로 정리하겠다.

EventListener가 이벤트를 감지하면 정해둔 함수를 실행할 수 있다.

 

CLICK

"click"은 말 그대로 클릭 이벤트를 감지한다.

hello.addEventListener("click", 함수);

 

MOUSEENTER

"mouseenter"는 커서가 요소 위에 올라오면 이벤트가 발생한다.

hello.addEventListener("mouseenter", 함수);

MOUSELEAVE

"mouseleave"는 요소에서 커서가 떠나게 되면 이벤트가 발생한다.

hello.addEventListener("mouseleave", 함수);

 

CONTEXTMENU

"contextmenu"는 마우스의 선택버튼(왼쪽버튼) 외에 우클릭을 하게 되면 이벤트가 발생한다.

hello.addEventListener("contextmenu", 함수);

 

RESIZE

"resize"는 사이즈가 변경될 때 이벤트가 발생하는데, 변수에 지정하지 않고 window를 사용한다.

window.addEventListener("resize", 함수);