9/12 TIL

< 목차 >

1. 이벤트 객체

---

1.이벤트 객체

우리는 웹 사이트를 서핑하다 보면, 이미지나 카드를 클릭하거나 드래그하는일이 발생한다. 이렇게 클릭이나 드래그하는걸 이벤트라고 한다.

< 이벤트를 처리하는데 있어서는 3가지 방법이 있다 >

• HTML 요소의 이벤트 처리기 속성에 설정하는 방법
• DOM요소 객체의 이벤트 처리기 프로퍼티 설정하는 방법
• addEventListner 메서드 사용하는 방법

< 장점 >

• HTML 문서를 읽어드릴때 이벤트 처리도 함께 설정하기 때문에 설정방법이 쉽다

< 단점 >

• HTML문서와 JS 문서가 뒤섞여서 가독성이 떨어진다 이말은 즉, 유지보수하기 힘들어진다.

• 특정 요소의 특정 이벤트에 대해서는 이벤트 처리를 하나만 등록이 가능한데 그 요소에 똑같은 이벤트를 처리하게끔 등록한다면 나중에 등록한 함수가 이전등록한 함수를 덮어씌워버린다.

• HTML은 여러명의 개발자가 JS 파일과 라이브러리 위에서 동작하는데 이떄 두개이상의 파일이 같은 요소에 같은 이벤트 처리를 해버리면 이전에 등록한 이벤트가 무효로 처리되어버린다.

• 자바스크립트 파일이나 라이브러리 자체가 제대로 작동을 하지않을수있다.

• addEventListener 메서드로 이벤트 리스너 등록하기
  - 해당 메서드를 이용하게 되면 같은 요소에 같은 이벤트에 이벤트 리스너를 여러개 등록이 가능하다고 한다

< 예제코드 >

target.addEventListener(type, listener, useCapture);

• 구성 요소의 의미

target: 이벤트 리스너를 등록할 DOM노드
type : 이벤트 유형을 뜻하는 문자열(‘click’ , mouseup 등)
listener: 이벤트가 발생했을 때 처리를 담당하는 콜백함수의 참조
useCapture: 이벤트 단계
useCapture의 값은 true, false둘중 하나임
true: 캡처링 단계
false: 버블링 단계(생략했을 때의 기본값)