addEventListener()

 

안녕하세요 찐망고입니다.

 

 

addEventListener()는 JavaScript에서 이벤트 처리를 위해 사용되는 메서드인데요.

이 메서드를 사용하면 HTML 요소에 이벤트 리스너를 추가할 수 있습니다.

// element.addEventListener(event, function, useCapture);


window.addEventListener('scroll', function() {})


function toggleOnClass() {
	header.classList.add("on");
}
const btn = document.querySelector("button")
btn.addEventListener("mouseenter", toggleOnClass)

 

1. 클릭이벤트 (click): 사용자가 마우스로 요소를 클릭할 때 발생
2. 마우스 이벤트 (mouseover, mouseout, mousemove): 마우스의 동작에 관련된 이벤트로,
   요소위로 마우스가 올라갔을 때(mouseover), 요소를 벗어날 때(mouseout),
   마우스가 움직일 때(mousemove) 발생
3. 키보드 이벤트 (keydown, keyup, keypress): 키보드의 동작에 관련된 이벤트로, 
   키를 누를 때(keydown), 키를 눌렀다 놓을 때(keyup), 혹은 키를 누르는 동작(keypress)에 관련된 이벤트
4. 폼 관련 이벤트 (submit, change, focus, blur): 폼 요소와 관련된 동작에 관련된 이벤트로, 
   폼을 제출할 때(submit), 입력 필드의 내용이 변경될 때(change), 입력 필드에 포커스가 됐을 때(focus), 
   포커스가 해제됐을 때(blur) 등이 있음
5. 로드 이벤트 (load, unload): 문서나 이미지 등이 로드될 때(load) 혹은 페이지를 떠날 때(unload) 발생
6. 스크롤 이벤트 (scroll): 사용자가 페이지를 스크롤할 때 발생
7. 애니메이션 이벤트 (animationstart, animationend, animationiteration): CSS 애니메이션이 시작될 때(animationstart), 끝날 때(animationend), 혹은 반복될 때(animationiteration) 발생
8. 터치 이벤트 (touchstart, touchmove, touchend): 터치 기반 디바이스에서의 동작에 관련된 이벤트로, 
   사용자가 스크린에 터치할 때(touchstart), 이동할 때(touchmove), 손가락을 화면에서 떼었을 때(touchend) 발생
   

 

웹페이지에서는 이벤트활용이 매우 중요합니다.

 

이벤트를 사용하여 사용자와 웹페이지 간의 상호 작용을 가능하게 하고

사용자가 버튼을 클릭하거나 폼을 제출하거나 마우스를 이동하는 등의 동작을 통해

웹페이지가 실시간으로 반응하면서 사용자 경험을 향상할 수 있습니다.

로그인, 스크롤 시 움직이는 화면, 페이지 전환 등등 말이죠

 

 

---

 

 

여기서 다시 알아보는 마우스이벤트!!

 

`mouseenter `와 `mouseover `는 둘 다 마우스 이벤트인데요

 

`mouseenter `는 마우스 커서가 요소 안으로 진입할 때 발생하는 이벤트고 

부모요소에서 자식 요소로 이동할 때는 발생하지 않습니다.

부모요소와 자식요소사이를 이동할 때 한 번만 발생하여 마우스가 요소 안으로 들어오면

해당요소에 대한 특정작업을 수행합니다.

 

`mouseover `는 마우스 커서가 요소 안으로 진입할 때마다 발생하는 이벤트인데,

부모요소에서 자식요소로 이동할 때마다 이벤트가 발생합니다.

 

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

 

 

 

 

정리 잘된 포스팅이 있어 가져와봅니다 😁

 

[Javascript] 마우스 이벤트 / 드래그 앤 드롭 (Drag and drop)

MouseOver와 MouseEnter의 차이, 이벤트 버블링