[2022-11-16] 이벤트 리스너 Event Listener

이벤트란?

사용자가 클릭,입력등 행위나 브라우저 상태변화에 따라 JS코드에게 알리는 행동

 

이벤트 리스너(Event Listener)란?

이벤트 발생에 대처하기위해 작성된 JS코드

 

이벤트 종류
- HTML5에서 이벤트 종류는 70 여개
- 이벤트 리스너 이름은 이벤트 이름 앞에 "on" 을 붙인다

 

화살표함수쓰지말기 this를 쓰면 해당DOM객체가 아니라

window그 자체가 선택된다

 

 

---

주요 이벤트 리스너 == 메소드() 괄호안에 2개의 인자값이 들어와야한다.

이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다.

함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.

옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.

 

 

on을 빼고 첫번째 인자로 넣어준다.

 

---

이벤트리스너를 사용하면 동작을 여러개 줄 수 있다.(익명함수 사용가능)

on이벤트와 다른이점1

 

이벤트리스너는 삭제가 가능하다

on이벤트와 다른이점2 

위 코드와 동일하지만 remove를 사용해 이벤트를 삭제하여서 console.log에 "클릭하셨나요22"만 출력된다.

 

 

 

 

---

이벤트 객체 (event object)

함수or익명함수의 매겨변수로 값을 주면 event를 줄 수 있는 객체가 활성화되게된다.매개변수명은 마음대로 정할 수 있지만 통상 event 혹은 e라고 정한다.

이벤트객체를 통하여 DOM객체의 동적인 값을 얻어 객체를 선택할 수 있다.

DOM객체.addEventListener("이벤트리스너", 함수or익명함수,옵션)

 

 

 

이벤트객체.target  속성을 이용하여 div전체를 선택 할 수 있다.

새싹 DT 기업연계형 프론트엔드 실무 프로젝트  5주차 블로그 포스팅