programing

addEventListener의 useCapture 매개 변수를 이해할 수 없습니다.

itsource 2022. 9. 24. 23:35
반응형

addEventListener의 useCapture 매개 변수를 이해할 수 없습니다.

https://developer.mozilla.org/en/DOM/element.addEventListener에서 기사를 읽었는데 이해할 수 없습니다.useCapture기하다:. 는 과 같습니다을 사용하다

true일 경우 useCapture는 사용자가 캡처를 시작하려는 것을 나타냅니다.캡처를 시작하면 지정된 유형의 모든 이벤트가 등록된 리스너로 디스패치된 후 DOM 트리의 그 아래에 있는 EventTargets로 디스패치됩니다.트리를 통해 위로 버블하는 이벤트는 캡처를 사용하도록 지정된 수신기를 트리거하지 않습니다.

이 코드 부모 이벤트는 아이보다 먼저 트리거되기 때문에 그 동작을 이해할 수 없습니다.문서 객체는 usecapture true이고 하위 div는 usecapture set false이며 문서 usecapture를 따릅니다.따라서 문서 속성이 자식보다 선호되는 이유는 무엇입니까?

function load() {
  document.addEventListener("click", function() {
    alert("parent event");
  }, true);

  document.getElementById("div1").addEventListener("click", function() {
    alert("child event");
  }, false);
}
<body onload="load()">
  <div id="div1">click me</div>
</body>

이벤트는 다음 두 가지 경우에 활성화할 수 있습니다.시작("포착")과 끝("거품")입니다.이벤트는 정의된 순서대로 실행됩니다.예를 들어, 4개의 이벤트청취자를 정의합니다.

window.addEventListener("click", function(){console.log(1)}, false);
window.addEventListener("click", function(){console.log(2)}, true);
window.addEventListener("click", function(){console.log(3)}, false);
window.addEventListener("click", function(){console.log(4)}, true);

로그 메시지는 다음 순서로 표시됩니다.

  • 2, (「」, 「」)capture=true)
  • 4)을 사용하여 를 정의합니다.capture=true)
  • 1)capture=false)
  • 3: (''가 있습니다)capture=false)

다음 그림은 캡처/타겟/프로세서 단계를 이해하는 데 매우 도움이 됩니다.http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

아래는 링크에서 추출된 콘텐츠입니다.

단계

이벤트는 트리의 루트에서 이 타깃노드로 경로를 따라 디스패치됩니다.그런 다음 대상 노드 수준에서 로컬로 처리하거나 트리의 상위 위치에서 처리할 수 있습니다.이벤트 디스패치(이벤트 전파라고도 함)는 3단계로 진행되며 다음 순서로 진행됩니다.

  1. 캡처 단계: 이벤트는 트리의 루트에서 대상 노드의 직접 상위 노드로 전송됩니다.
  2. 대상 단계: 이벤트가 대상 노드로 디스패치됩니다.
  3. 버블링 단계: 이벤트는 대상 노드의 직계 상위 노드에서 트리의 루트로 전송됩니다.

DOM 이벤트 플로우를 사용하여 DOM 트리로 디스패치된 이벤트의 그래픽 표현

타겟의 조상은 이벤트의 최초 디스패치 전에 결정됩니다.디스패치 중에 타깃노드가 삭제되거나 타깃의 상위 노드가 추가 또는 삭제될 경우 이벤트 전파는 항상 디스패치 전에 결정된 타깃노드와 타깃의 상위 노드를 기반으로 합니다.

일부 이벤트는 DOM 이벤트흐름의 3단계를 반드시 달성하지 못할 수 있습니다.예를 들어 이벤트는 1단계 또는 2단계에서만 정의할 수 있습니다.예를 들어 이 사양에서 정의된 이벤트는 항상 캡처 단계와 타깃 단계를 수행하지만 일부는 버블링 단계를 수행하지 않습니다('버블링 이벤트' 대 '비버블링 이벤트'). Event.bubbles 속성' 참조).

이벤트 「」)useCapture = true )vs 버블이벤트 ( )useCapture = false)

MDN 레퍼런스

  • 캡처 이벤트는 버블 이벤트 전에 디스패치됩니다.
  • 이벤트 전파 순서는 다음과 같습니다.
    1. 부모 캡처
    2. 차일드 캡처
    3. 타깃 캡처 및 타깃버블
      • 등록된 순서대로
      • , 「 」는 「 」를 참조해 주세요.useCapture(@ 및 감사합니다
    4. 칠드런 버블
    5. 부모 버블
  • stopPropagation()을 하다

캡처 흐름 사용

데모

결과:

  1. 부모 캡처

  2. 대상 버블 1

    (Capture 및 Bubble of Target은 등록된 순서대로 트리거되므로 Bubble 이벤트는 Capture 이벤트 전에 트리거됩니다.)

  3. 타깃 캡처

  4. 대상 버블 2
  5. 부모 버블

var parent = document.getElementById('parent'),
target = document.getElementById('target');

target.addEventListener('click', function (e) { 
console.log('Target Bubble 1');
// e.stopPropagation();
}, false);

target.addEventListener('click', function (e) { 
console.log('Target Capture');
// e.stopPropagation();
}, true);

target.addEventListener('click', function (e) { 
console.log('Target Bubble 2');
// e.stopPropagation();
}, false);

parent.addEventListener('click', function (e) { 
console.log('Parent Capture');
// e.stopPropagation();
}, true);

parent.addEventListener('click', function (e) { 
console.log('Parent Bubble');
// e.stopPropagation();
}, false);
<div id="parent">
    <button id="target" style="padding: 1em 0.8em;">
        Trigger event
    </button>
</div>

useCapture = true라고 하면 캡처 단계에서 이벤트가 위에서 아래로 실행됩니다(false일 경우 아래쪽에서 위로 버블이 발생합니다.

요약:.

DOM을 사용하다

https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

는 다음과 같이 동작합니다.

( 에 따라서 이벤트가 .document)을 클릭합니다.대상 노드가 가장 깊습니다.HTML소, 、 event 、 event . target 。이벤트 디스패치(이벤트 전파라고도 함)는 3단계로 진행되며 다음 순서로 진행됩니다.

  1. 캡처 단계: 이벤트는 트리의 루트에서 타깃의 상위 항목으로 디스패치됩니다.document 부모에게 를 타겟노드의 직계 부모에게 송신합니다.
  2. 대상 단계: 이벤트가 대상 노드로 디스패치됩니다.목표 단계는 항상 가장 깊은 곳에 있습니다.html이벤트가 디스패치된 요소
  3. 버블링 단계: 이벤트는 대상 노드의 직계 상위 노드에서 트리의 루트로 전송됩니다.

이벤트 버블링, 이벤트 캡처, 이벤트 타깃

예:

// bubbling handlers, third argument (useCapture) false (default)
document.getElementById('outerBubble').addEventListener('click', () => {
  console.log('outerBubble');
}, false)

document.getElementById('innerBubble').addEventListener('click', () => {
  console.log('innerBubble');
}, false)


// capturing handlers, third argument (useCapture)  true
document.getElementById('outerCapture').addEventListener('click', () => {
  console.log('outerCapture');
}, true)

document.getElementById('innerCapture').addEventListener('click', () => {
  console.log('innerCapture');
}, true)
div:hover{
  color: red;
  cursor: pointer;
}
<!-- event bubbling -->
<div id="outerBubble">
  <div id="innerBubble">click me to see Bubbling</div>
</div>


<!-- event capturing -->
<div id="outerCapture">
  <div id="innerCapture">click me to see Capturing</div>
</div>

위의 예는 이벤트버블링과 이벤트캡처의 차이를 나타내고 있습니다. 시 "" " " " " "addEventListeneruseCapture라는 세 은 A입니다.boolean로 which which로 true를 사용하면 이벤트청취자는 이벤트버블링 대신 이벤트캡처를 사용할 수 있습니다.

를 useCapture로 .false이데올로기 때문에먼저 타깃 단계에서 이벤트가 발생(로그 innerBubble), 다음으로 이벤트 버블링을 통해 부모 요소의 이벤트가 발생(로그 outerBubble)됩

를 useCapture로 한 true에서는, 「」의 이벤트가 발생하고 있는 것을 알 수 있습니다.<div>먼저 발사됩니다.이는 이벤트가 버블링 단계가 아닌 캡처 단계에서 실행되기 때문입니다.

이벤트 모델에 관한 모든 것: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow 이벤트를 거품 단계 또는 캡처 단계에서 볼 수 있습니다.당신의 선택이다.
http://www.quirksmode.org/js/events_order.html 를 참조해 주세요.매우 편리합니다.

코드 예:

<div id="div1" style="background:#9595FF">
  Outer Div<br />
  <div id="div2" style="background:#FFFFFF">
    Inner Div
  </div>
</div>

Javascript 코드:

d1 = document.getElementById("div1");
d2 = document.getElementById("div2");

둘 다 false로 설정되어 있는 경우

d1.addEventListener('click',function(){alert("Div 1")},false);
d2.addEventListener('click',function(){alert("Div 2")},false);

실행:[ Inner Div ]를 클릭하면 경보가 [Div 2]> [ Div 1 ]로 표시됩니다.

여기서 스크립트는 내부 요소 Event Bubbling에서 실행됩니다(useCapture는 false로 설정되었습니다).

div 1이 true로 설정되고 div 2가 false로 설정됩니다.

d1.addEventListener('click',function(){alert("Div 1")},true);
d2.addEventListener('click',function(){alert("Div 2")},false);

실행:[ Inner Div ]를 클릭하면 경보가 [Div 1]> [ Div 2 ]로 표시됩니다.

여기서 스크립트는 상위/외부 요소: 이벤트 캡처에서 실행됩니다(useCapture는 true로 설정됨).

div 1이 false로 설정되고 div 2가 true로 설정됩니다.

d1.addEventListener('click',function(){alert("Div 1")},false);
d2.addEventListener('click',function(){alert("Div 2")},true);

실행:[ Inner Div ]를 클릭하면 경보가 [Div 2]> [ Div 1 ]로 표시됩니다.

여기서 스크립트는 내부 요소 Event Bubbling에서 실행됩니다(useCapture는 false로 설정되었습니다).

div 1이 true로 설정되고 div 2가 true로 설정됩니다.

d1.addEventListener('click',function(){alert("Div 1")},true);
d2.addEventListener('click',function(){alert("Div 2")},true);

실행:[ Inner Div ]를 클릭하면 경보가 [Div 1]> [ Div 2 ]로 표시됩니다.

여기서 스크립트는 상위/외부 요소에서 실행됩니다: useCapture가 true로 설정된 이후 이벤트 캡처

이벤트 여행의 세 단계가 주어집니다.

  1. 캡처 단계: 이벤트는 트리의 루트에서 대상 노드의 직접 상위 노드로 전송됩니다.
  2. 대상 단계: 이벤트가 대상 노드로 디스패치됩니다.
  3. 버블링 단계: 이벤트는 대상 노드의 직계 상위 노드에서 트리의 루트로 전송됩니다.

useCapture이벤트 여행의 단계를 나타냅니다.

iftrueuseCapture는 사용자가 캡처 단계에만 이벤트청취자를 추가하는 것을 나타냅니다.즉, 이 이벤트청취자는 타겟 단계 및 버블 단계에서는 트리거되지 않습니다.한다면false 및

출처는 두 번째 최선의 답변과 동일합니다.https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

정의 순서는 항목이 동일한 수준일 경우에만 중요합니다.코드의 정의 순서를 반대로 해도, 같은 결과가 됩니다.

단, 2개의 이벤트핸들러에서 useCapture 설정을 반대로 하면 하위 이벤트핸들러는 상위 이벤트핸들러보다 먼저 응답합니다.그 이유는 부모 이벤트핸들러가 트리거되는 버블링 단계 이전의 캡처 단계에서 자녀 이벤트핸들러가 트리거되기 때문입니다.

정의 순서에 관계없이 두 이벤트핸들러에 대해 useCapture를 true로 설정하면 캡처 단계에서 상위 이벤트핸들러가 자녀보다 먼저 트리거 됩니다

반대로 정의 순서에 관계없이 두 이벤트핸들러에 대해 useCapture를 false로 설정하면 자녀 이벤트핸들러는 버블링 국면에서 부모보다 먼저 트리거 됩니다.

언급URL : https://stackoverflow.com/questions/7398290/unable-to-understand-usecapture-parameter-in-addeventlistener

반응형
저작자표시

'programing' 카테고리의 다른 글

데이터에서의 월과 연도의 갭 메우기  (0) 2022.09.24
AngularJS : $observe 메서드와 $watch 메서드의 차이  (0) 2022.09.24
그룹화된 SQL 결과의 각 그룹에 대해 최대값을 가진 레코드를 가져옵니다.  (0) 2022.09.24
Twig에 어레이의 특정 키가 있는지 확인합니다.  (0) 2022.09.24
Galera MySQL의 추가 노드 추가 실패  (0) 2022.09.21

'programing'의 다른글

  • 현재글addEventListener의 useCapture 매개 변수를 이해할 수 없습니다.

관련글

댓글

티스토리툴바