[TIL] addEventListener ( ) 함수 ㅡ 이벤트를 처리해 봅시다

 

🌷 addEventListener() 함수 

---

 

화면에 마우스를 올리거나, 키보드를 조작하거나 터치하거나 등등등.. 어떤 행위를 하면(?) 그에 대한 반응을 하는 것을 이벤트라 한다 

 

 

 

자바스크립트에서 이벤트 처리하는 방법은 3가지가 있는데,

 

1️⃣ HTML 태그 안에서 이벤트 처리 연결하기

2️⃣ DOM 요소에 이벤트 처리 연결하기

3️⃣ addEventListener() 함수 사용하기 (오늘 제가 공부한 것은 이것입니다..네네..) 

 

1, 2번은 이벤트를 하나만 지정할 수 있다는 단점이 있지만, addEventListener() 함수를 사용하면 여러개의 이벤트를 등록할 수 있다. 

 

 

기본 문법은 아래와 같다 

pic 이라는 변수가 있고, 이 변수에 지정된 요소에 이벤트를 처리하고 싶다면 'pic.addEventListener()' 

 

✔️ 이벤트 유형은 mouseover, click, mousedown, resize, scroll 등등 다양하며, 

✔️ 처음에 이벤트 유형을 지정해주고, 이벤트가 발생했을 때 실행할 명령이나 함수 이름을 써준다 

✔️ 캡처 여부는 이벤트를 캡처링 하는지 여부를 지정하는 건데, 이는 생략할 수 있음

true면 캡처링, false면 버블링 한다는 의미인데, 기본값은 false이며 이부분은 아직 deep 하게 공부하지 않았기 때문에 추후에 다시 포스팅 할게요.. (작아지는 나) 

 

 

 

 

하나의 객체에 여러개의 이벤트를 등록하고 싶을 땐 아래와 같이 함수를 사용하면 됩니다.