기본적인 질문은 간단합니다. 다른 요소 내에 하나의 요소가 포함되어 있다고 가정합니다.
이 두 요소에는 모두 onclick 이벤트 핸들러가 있습니다. 사용자가 요소 2를 클릭하면 요소 2와 요소 1 모두에서 클릭 이벤트가 트리거됩니다. 그런데 어떤 사건이 먼저 일어났나요? 어떤 이벤트 핸들러가 먼저 실행될까요? 즉, 이벤트 순서는 무엇입니까?
Netscape와 Microsoft 모두 과거 불황기에 스스로 결정을 내렸다는 것은 의심의 여지가 없습니다.
Netscape에서는 element1이 먼저 발생했다고 말했습니다. 이를 이벤트 캡처라고 합니다.
Microsoft는 element2가 먼저 발생했다고 생각합니다. 이를 이벤트 버블링이라고 합니다.
두 행사의 순서는 정반대입니다. IE는 이벤트 버블링만 지원합니다. Mozilla, Opera 7 및 Konqueror는 둘 다 지원합니다. 이전 Opear 및 iCab 브라우저는 둘 중 하나를 지원하지 않습니다.
코드는 다음과 같습니다.
| --- --------| |------ | >| -- --------- |----------- |요소2 | ---- ------------- | W3C 이벤트 모델 | ---- ------------------ 디자이너는 캡처 또는 버블링 단계에서 이벤트 핸들러를 등록하도록 선택할 수 있습니다. 이는 이전 고급 모드에서 소개한 addEventListener() 메소드를 통해 수행할 수 있습니다. 마지막 매개변수가 true이면 이벤트 캡처로 설정되고, false이면 이벤트 버블링으로 설정됩니다.
다음과 같이 작성한다고 가정해 보겠습니다.
element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)
사용자가 element2를 클릭하는 경우 다음과 같은 일이 발생합니다:
, 캡처 단계에서 클릭 이벤트가 발생합니다. element2의 상위 요소에 onclick 이벤트 핸들러가 있으면 실행되는 것 같습니다.
이벤트는 element1에서 doSomething2()를 찾은 다음 실행됩니다.
이벤트는 대상 자체에 전달되며 다른 캡처 단계 프로그램은 없습니다. 이벤트가 버블링 단계에 진입한 후, 버블링 단계에서 element2에 의해 등록된 이벤트 핸들러인 doSomething()이 실행됩니다.
이벤트가 위쪽으로 전달된 다음 부모 요소가 버블링 단계에서 이벤트 핸들러를 설정했는지 확인합니다. 여기에는 사람이 없으므로 아무 일도 일어나지 않습니다.
역순:
element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)
이제 사용자가 element2를 클릭하면 무엇을 발생:
캡처 단계에서 이벤트 클릭이 발생합니다. 이벤트는 element2의 상위 요소에 캡처 단계 중에 등록된 이벤트 핸들러가 있는지 확인하지만 여기서는 그렇지 않습니다.
이벤트가 대상 자체에 전달됩니다. 그런 다음 버블링 단계가 시작되고 dosomething()이 실행됩니다. 이는 element2의 버블링 단계에 등록된 이벤트 핸들러입니다.
이벤트는 계속 위쪽으로 전달된 다음 버블링 단계에서 상위 요소가 이벤트 핸들러를 등록했는지 확인합니다.
, 이벤트가 element1을 발견했습니다. 그런 다음 doSomething2()가 실행되었습니다.
레거시 모드 호환성
W3C DOM을 지원하는 브라우저의 경우 레거시 이벤트 등록
element1.onclick = doSomething2
은 버블링 단계에서 등록된 것으로 간주됩니다.
이벤트 버블링의 사용
이벤트 캡처나 버블링에 대해 알고 있는 디자이너는 거의 없습니다. 오늘날의 웹 페이지 생성 세계에서는 일련의 이벤트 핸들러가 버블링 이벤트를 처리할 필요가 없는 것 같습니다. 클릭 후 발생하는 일련의 이벤트로 인해 사용자가 혼란스러울 수도 있으므로 일반적으로 이벤트 핸들러 코드를 어느 정도 독립적으로 유지하려고 합니다. 사용자가 한 요소를 클릭하면 어떤 일이 발생하고, 다른 요소를 클릭하면 다른 일이 발생합니다.
물론 이는 향후 변경될 수 있으므로 모델을 향후 버전과 호환되도록 유지하는 것이 가장 좋습니다. 그러나 오늘날 가장 실용적인 이벤트 캡처 및 버블링은 기본 기능을 등록하는 것입니다.
항상 발생합니다.
가장 먼저 이해해야 할 것은 이벤트 캡처 또는 버블링이 항상 발생한다는 것입니다. 전체 페이지에 대해 onclick 이벤트를 정의하는 경우:
document.onclick = doSomething;
if (document.captureEvents) document.captureEvents(Event.CLICK)
모든 요소에 대한 클릭 시간이 페이지에 표시됩니다. 이 이벤트 핸들러를 설정하세요. 이전 이벤트 핸들러가 버블링을 명시적으로 방지하는 경우에만 전체 페이지에 전달되지 않습니다.
사용 각 이벤트가 문서 전체에서 중지되므로 기본 이벤트 핸들러가 가능해집니다. 다음과 같은 페이지가 있다고 가정해 보겠습니다.
---- -------------------
| 문서 | ---- ------- ------------ | 요소1 | ---- ------------
--------------- | ------- -----
element1.onclick = doSomething;
element2.onclick = doSomething;
document.onclick =
이제 사용자가 element1이나 element2를 클릭하면 doSomething()이 실행됩니다. 원한다면 여기에서 확산을 막을 수도 있습니다. 그렇지 않은 경우 defaultFunction()이 실행됩니다. 사용자가 다른 곳을 클릭해도 defaultFunction()이 실행됩니다. 때로는 이것이 유용할 수 있습니다.
드래그 코드 작성 시 전역 이벤트 핸들러 설정이 필요합니다. 일반적으로 레이어의 mousedow 이벤트는 이 레이어를 선택하고 mousemove 이벤트에 응답합니다. 일부 브라우저 버그를 피하기 위해 mousedown은 일반적으로 이 수준에서 등록되지만 다른 이벤트 핸들러는 문서 전체에 있어야 합니다.
브라우저 논리의 첫 번째 법칙을 기억하세요. 준비가 거의 되지 않았을 때 어떤 일이 발생하는 경우가 많습니다. 사용자의 마우스가 격렬하게 움직이고 코드가 따라가지 못하여 마우스가 더 이상 이 레이어에 있지 않게 되는 경우가 발생할 수 있습니다.
onmousemove 이벤트 핸들러가 레이어에 등록되어 있으면 레이어가 더 이상 마우스 움직임에 반응하지 않으면 사용자에게 혼란을 줄 것입니다.
onmouseup 이벤트 핸들러가 특정 페이지에 등록되어 있으면 사용자가 마우스를 놓을 때 프로그램이 레이어를 캡처하지 않아 레이어가 여전히 마우스와 함께 움직입니다.
이 경우 전역 이벤트 핸들러의 실행이 보장되므로 이벤트 버블링이 중요합니다.
해제
그러나 일반적으로 관련 캡처 및 버블링을 모두 끄고 싶어합니다. 또한 문서 구조가 매우 복잡한 경우(예: 복잡한 테이블이 많음) 시스템 리소스를 절약하기 위해 버블링도 꺼야 합니다. 그렇지 않으면 브라우저는 이벤트 핸들러가 있는지 확인하기 위해 상위 요소를 하나씩 확인해야 합니다. 없을 수도 있지만 검색하는 것은 여전히 시간 낭비입니다.
Microsoft 모드에서는 이벤트의 cancelBubble 속성을 true로 설정해야 합니다.
window.event.cancelBubble = true
W3C 모드에서는 stopPropagation() 메서드를 호출해야 합니다.
e.stopPropagation()
이렇게 하면 이 이벤트의 버블링 단계가 중지됩니다. 이벤트의 캡처 극한을 방지하는 것은 기본적으로 불가능합니다. 나도 그 이유를 알고 싶다.
완전한 크로스 브라우저 코드는 다음과 같습니다.
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true
if (e.stopPropagation) e.stopPropagation ();
}
cancelBubble을 지원하지 않는 브라우저에서 설정해도 문제 없습니다. 브라우저는 이러한 속성을 생성합니다. 물론 안전을 위해서라면 아무 소용이 없습니다.
currentTarget
앞서 말했듯이 이벤트에는 대상이 포함되거나 srcElement에는 이벤트가 발생한 요소에 대한 참조가 포함됩니다. 우리의 경우에는 사용자가 클릭했기 때문에 element2입니다.
이 대상은 캡처 및 버블링 중에 변경되지 않는다는 점을 이해하는 것이 중요합니다.
그러나 다음 이벤트 핸들러를 등록한다고 가정해 보겠습니다.
element1.onclick = doSomething; 🎜>element2.onclick = doSomething;
사용자가 element2를 클릭하면 doSomething()이 두 번 실행됩니다. 그렇다면 어떤 HTML 요소가 이 이벤트를 처리하는지 어떻게 알 수 있나요? target/scrElement는 답변을 제공할 수 없으며 이벤트 시작부터 element2를 가리키고 있습니다.
이 문제를 해결하기 위해 W3C는 currentTarget 속성을 추가했습니다. 여기에는 처리 중인 이벤트의 HTML 요소(우리가 원하는 요소)에 대한 참조가 포함되어 있습니다. 불행히도 Microsoft 모드에는 유사한 속성이 없습니다.
이 키워드를 사용할 수도 있습니다. 이 예에서는 currentTarget으로 시작하여 처리 중인 이벤트의 HTML 요소를 가리킵니다.
Microsoft 모델의 문제점
그런데 Microsoft의 이벤트 등록 모델을 사용하면 this 키워드가 HTML 요소에만 적용되지 않습니다. 그러면 currentTarget과 같은 속성이 없습니다. 즉,
element1.attachEvent('onclick',doSomething)
element2.attachEvent('onclick',doSomething)
하면 안 됩니다. 어떤 HTML 요소가 이벤트를 처리하고 있는지 알 수 있습니다. 이는 마이크로소프트의 이벤트 등록 모델의 가장 심각한 문제이므로 IE/win에서만 작동하는 프로그램이라 할지라도 전혀 사용하지 마십시오.
Microsoft가 곧 currentTarget과 같은 속성을 추가하거나 표준을 따르기를 바랍니다. 우리는 디자인이 시급히 필요합니다.
계속
계속 학습하고 싶다면 다음 장을 읽어주세요.
원래 주소: http://www.quirksmode.org/js/events_order.html
내 트위터: @rehawk
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
