많은 튜토리얼과 게시물을 읽은 후에 잠시 동안이 질문을 던졌습니다. 아무도이 블록을 통과하는 데 필요한 정신적 모델을 제공하지 못했습니다. 루트의 모든 캡처 단계 이벤트 핸들러를 발사, 우리는 앵커 태그를 클릭하면이벤트 리스너 캡쳐 및 버블 링 단계 이벤트
은 인용에 기술 된 코드의 조각이다. 많은 설명은 Capture와 Bubble 단계가 DOM을 아래 위로 걷는 것에 대해 이야기합니다. 어떻게 이해가 안되는가 "all" 캡처 단계에서 트리를 걷는 동안 이벤트가 발생하고 모든 버블 이벤트가 트리를 향해 실행됩니다. "모두"란 무엇입니까? 페이지의 모든 이벤트입니까? 그들은 "조용히"해고되고 실제로 클릭 이벤트가 발생하지 않은 곳에서 실행되지 않기 때문에 실제로 실행 된 유일한 이벤트는 클릭 된 요소뿐입니다. 나머지 이벤트는 어떤 이유로 저장됩니다. 나중에 블로그 게시물에서 이 다른 설명은 나를 혼란과 기준에 대한 나의 오해에 "모든 이벤트"관련 :에서, DOM가 캡처 단계의 경로를 계산 : 여기
은 브라우저 이벤트에 대한 terrific blog 게시물에서 발췌 한 것입니다 문서, 본문, div 및 앵커 태그를 순서대로 정렬 한 다음 바코드 위상 이벤트 핸들러 중 을 캡처 단계의 역순으로 실행합니다. 다음<html> <head> </head> <body> <div id="myDiv"> <a id="myAnchor" href="http://bitovi.com/">bitovi! </a> </div> </body> </html>내가 이해하지 못하는 것입니다 : 여기
이가 캡처 단계 이벤트의 실행 중에 발생하는 설명입니다 :
이제 우리는 방금 수집 한 모든 요소를 반복합니다 (그리고 뒤집습니다). 여기서 우리가해야 할 몇 가지 :
우리는 event.stopPropagation는() 이벤트 핸들러 중 하나 발사에 의해 호출 된 경우 확인 (이 글 머리 기호 목록의 마지막 단계 참조)해야합니다. 인 경우이 루프에서 벗어났습니다. 을 반복하여 반복 할 필요가 없습니다.
다음으로 현재 평가중인 DOM 노드에 대해 캡처 위상 이벤트 핸들러가 설정되어 있는지 확인합니다.
마지막으로 수집 한 모든 처리기를 반복하여 현재 평가중인 노드의 컨텍스트에서 실행합니다.
나는 마지막 두 개의 글 머리 기호에 의해 혼란 스러워요. "현재 평가중인 DOM 노드에 대해 설정된 캡처 단계 이벤트 핸들러가 있는지 확인하십시오." 일반적으로 addEventListener 메서드를 사용하여 이벤트 처리기를 설정하는 방법을 이해합니다. 다음은 혼란이있는 곳입니다 :
"수집 된 모든 처리기를 루프하여 현재 평가중인 노드의 컨텍스트에서 실행합니다".
페이지의 모든 핸들러가 수집되고 실행됩니까? 이벤트에 stop.prop 이벤트가 있거나 dom 노드에 이벤트가 트리거되지 않은 경우 이벤트가 실행되지 않습니까?
죄송합니다.이 질문이 혼란 스러우면, 나는 이해가되지 않는 것을 분명히하려고 노력할 것입니다. 감사!