JavaScript의 이벤트 전파

오늘 addEventListener의 파라미터를 조사했습니다.
사건 전파?공을 치다잡다??!왜냐하면 모르는 것들이니까.
제가 한번 찾아보고 정리할게요!

우선 대전제: 활동 전파

<!--HTML-->
<div id="parent">     <!--親-->
  <div id="child">    <!--子-->
  </div>
</div>

이처럼 친자관계의 두 요소 중 이본트리스나가 등록됐다.

document.getElementById('parent').addEventListener('click',()=>{
   alert('親だよ');
});
document.getElementById('child').addEventListener('click',()=>{
   alert('子だよ');
});

이처럼 친자관계에서 같은 이차원자에 접속해 아이를 클릭하면 부모의 활동도 함께 발동된다.

활동 전파 경로

행사가 발생한 후 다음과 같은 노선을 갈 수 있다.
① 포착 단계
윈도에서 그 아이, 그 다음에 그 아이, 그리고 순서대로 목적 노드를 향해 달리는 단계.
② 목표 단계
이벤트가 발생하는 요소로 전달되는 단계
③ 블렌드 단계
사건 발생 때부터 부모가 순차적으로 활동하는 단계.
에이!두 번 뛰었어!?
내 생각엔그 활동은 어디에서 전파됩니까?잠깐만요.

addEventListener의 세 번째 매개변수

그걸 결정할 수 있는 건 addEventListener의 세 번째 파라미터인 것 같아요.

element.addEventListener('click',event,true/false);

true・포착 단계에서 불이 났다.(부모가 먼저 화를 낸다는 뜻)false・・ 거품 단계에서 발화/(즉 먼저 발화) ← 초기치
이렇게 어디서 불이 나지?탭
그렇다면 포착 단계와 브린 단계에서 두 번 화를 내는 것도 가능하다.
사용법에 따라 재미있는 일을 할 수 있을 것 같다.

전파 정지!!!

stopPropagation()사용하면 된다고 합니다.

document.getElementById('parent').addEventListener('click',()=>{
   alert('親だよ');
});
document.getElementById('child').addEventListener('click',(e)=>{
   e.stopPropagation();
   alert('子だよ');
});

이렇게 하면 아이를 눌러도 부모의 이본트린스나는 반등하지 않는다.

경품: 등록을 금지하고 싶은 이블라스

removeEventListener··addeventListener에 등록된 이벤트 청취자를 삭제합니다.
이걸로 하면 돼.단, addeventeListener의 두 번째 인자를 무명 함수로 사용할 수 없음을 주의하세요!

function message() {
   console.log('Erase me!');
}

element.addEvenetListener('click',message) //登録

element.removeEventListener('click',message)  //削除