JavaScript 이벤트에 대한 몇 가지 세부정보

1. 캡처인가요 아니면 버블링인가요?

어제 질문을 받았습니다. 이벤트 흐름은 몇 단계로 구성되나요? 이 단계에서 사건이 몇 번이나 발생했습니까?

질문은 아주 간단한데, 이벤트가 몇 번이나 발생했는지 좀 헷갈리네요. 저는 캡처도 이벤트를 유발할 수 있고, 버블링도 이벤트를 유발할 수 있다고 늘 생각합니다. 하지만 이벤트는 한 번만 발생했습니다! 그래서 이를 정리하기 위해 글을 썼습니다. 이 내용을 잘 아는 학생들은 건너뛰셔도 됩니다.

하위 질문 1: 이벤트 흐름에는 몇 단계가 있나요?

"DOM2 수준 이벤트"에서 지정하는 이벤트 흐름에는 이벤트 캡처 단계, 대상 단계, 이벤트 버블링 단계의 세 단계가 포함됩니다.

1. IE9 이전의 IE 브라우저는 마지막 두 단계인 타겟 단계와 이벤트 버블링 단계만 지원합니다. 이 순서는 이해하기 쉽습니다. 중첩 수준이 가장 깊은 노드에서 이벤트가 수신된 후 상위 노드까지 단계적으로 전파됩니다.

2. 초기 Netscape 팀이 제안한 또 다른 이벤트 스트림은 이벤트 캡처입니다. 즉, 최상위 노드가 이벤트를 먼저 수신하고 가장 깊은 중첩 수준을 갖는 노드, 즉 이벤트 캡처 단계와 대상 단계로 점진적으로 전파해야 합니다

3. , ff, IE9 등은 세 단계 전체를 지원합니다.

하위 질문 2: 이 단계에서 사건은 몇 번이나 발생했나요?

이벤트가 발생하면 "DOM2 수준 이벤트"의 이벤트 흐름은 3단계(캡처 -> 대상 -> 버블링)를 거치게 되지만 모든 단계가 발생할 수는 없습니다. 노드의 경우 addEventListener 메소드의 세 번째 매개변수가 true이면 캡처 단계에서 이벤트가 발생하고, false이면 버블링 단계에서 이벤트가 발생합니다. 그래서 이벤트는 단 한 번만 일어났습니다!

외부 노드가 캡처 단계와 버블링 단계 모두에서 이벤트가 발생하도록 하려면 두 번 등록합니다.

그런데 "DOM 레벨 0 이벤트"(elem.onclick = function () {...})에도 이벤트 버블링이 있습니다.

2. 이벤트 등록 순서

동일 노드에 여러 이벤트를 등록합니다.

addEventListener를 사용하면 발생합니다. 순서는 이벤트가 추가된 순서를 기준으로 하며,

attachEvent를 사용할 경우 발생 순서가 역전되어 나중에 등록된 이벤트가 먼저 발생합니다.

3. 이벤트 제거

removeEventListener와 detachEvent는 이벤트 발생 시 동일한 콜백 함수를 사용하므로 이벤트 등록 시 익명 함수를 사용합니다. 제거할 수 없습니다.