이벤트란 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생으로 개발자가 원한다면 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것.
인라인 이벤트 핸들러
<button onclick="bgChange()">Press me</button>보통 <script>태그 안에서 정의된 함수를 호출하지만 어트리뷰트 안에 직접 JavaScript를 삽입할 수도 있다.
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>HTML 어트리뷰트를 많은 이벤트 핸들러 프로퍼티와 동등한 것이라고 생각할 수 있지만 다음과 같은 방법은 사용하면 안된다.
HTML과 JavaScript를 섞어버리면 parse가 어려워지기 때문이다.
또한 재사용성이 떨어지고, 유지보수 측면에서도 어려워진다.
이벤트 핸들러 추가, 제거
addEventListner()메서드를 사용한다.
btn.addEventListener('click', bgChange);addEventListener() 함수 안에, 우리는 두 매개변수(parameter)를 명시
1. 핸들러에 등록하고자 하는 이벤트의 이름
2. 그것에 응답하여 우리가 실행하기 원하는 핸들러 함수
이점
1. removeEventListner()
이전에 추가한 이벤트 핸들러를 제거하는 함수이다.
이벤트 핸들러는 AbortSignal을 addEventListener()에 전달하고, 나중에 AbortSignal을 소유하고 있는 컨트롤러에서 abort()를 호출함으로써 제거할 수도 있다.
작은 프로그램에서 사용되지 않는 이벤트 핸들러를 청소하는 것은 필수적이지 않지만 더 크고, 더욱 복잡한 프로그램에 대해서는, 이것은 효율성을 향상시킬 수 있다. 또한, 이벤트 핸들러를 제거할 수 있는 능력은 같은 버튼이 다른 상황에서 다른 작동을 수행하도록 하는 것을 가능하게 한다.
2. 같은 리스너에 대해 다수의 핸들러를 등록 가능
myElement.onclick = functionA;
myElement.onclick = functionB;다음 코드는 두 번째 onclick이 첫 번째 onclick을 덮어쓰지만
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);다음 코드는 두 함수 모두 작동한다.
이벤트 객체
이벤트 핸들러 함수 내부에서 event, e같은 이름으로 명명된 매개변수를 본적이 있을 것이다. 이들은 이벤트 객체로 불리며, 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달된다.
(e.target에서 이벤트 객체의 target 프로퍼티는 항상 이벤트가 발생된 요소에 대한 참조이다.)
기본행동 방지하기
이벤트가 기본적으로 하는 것을 방지하고 싶을 때 사용한다.
prventDefault()
이벤트 버블링과 캡처
이벤트 버블링과 캡처는 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동되었을 때 무슨일이 일어나는지를 기술하는 두 메커니즘이다.
부모요소를 가지고 있는 요소에서 이벤트가 발생되었을 때 현대 브라우저들은 두가지 다른 단계를 실행한다.
- 캡처링
- 버블링
캡처링
브라우저는 요소의 가장 바깥 조상(<html>)이 캡처링 단계에 대해 그것에 등록된 이벤트 핸들러가 있는지를 확인하기 위해 검사하고, 그렇다면 실행한다.
그리고 그것의 바로 다음의 조상요소로 이동하고 같은 일을 하고, 그리고서 그 다음 요소로 이동하고, <html> 요소에 닿을 때까지 계속한다.
버블링
캡처링의 반대의 일이 일어난다.
브라우저는 선택된 요소가 버블링 단계에 대해 그것에 등록된 onclick 이벤트 핸들러를 가지고 있는지 확인하기 위해 검사하고, 만약 그렇다면 실행한다.
그리고서 그럿은 바로 다음의 조상요소로 이동하고 같은 일을 하고, 그리고서 그 다음 요소로 이동하고, <html> 요소에 닿을 때까지 계속한다.
현대의 브라우저들은 기본으로 모든 이벤트 핸들러들은 버블링 단계에 대해 등록되어있다. 따라서 요소를 선택했을 때 요소의 조상을 타고 들어가 <html> 요소까지 올라가고(bubble) 그 동안 만나는 것들을 실행한다.
stopPropagation()
이런 버블링을 해결할 방법으로 표준 Event 객체의 stopPropagation()이라 불리는 함수를 사용할 수 있다.
이 함수는 핸들러의 이벤트 객체가 호출되었을 때 이는 첫번째 핸들러가 실행되지만 이벤트가 더 이상 위로 전파되지 않도록 만들어 더 이상의 핸들러가실행되지 않도록 한다.
옛날 브라우저들에서 nETSCAPE는 오직 이벤트 캡처링만을 사용했고, Internet Explorer는 오직 이벤트 버블링만을 사용했다. W3C에서 이를 표준화하는 시도를 하기로 결정했을 때 양쪽을 모두 채택하게 되어 현대 브라우저가 구현되었다.
기본적으로 모든 이벤트 핸들러는 버블링 단계에 등록이 되어있고, 대부분 이 경우가 더 타당하다. 하지만 캡처링 단계에 등록하기를 원한다면addEventListener()를 사용하고 옵션인 세번째 프로퍼티를true로 설정하면 가능하다.
