JavaScript의 이벤트 거품은 거품과 포획을 통해 JavaScript 이벤트를 효과적으로 처리합니다

 
Javascript는 웹 응용 프로그램의 상호작용을 제공합니다.이것은 사용자가 생성한 이벤트를 식별할 수 있다. 예를 들어 마우스 클릭, 마우스 스크롤, 키보드 키를 누르는 등이다.이런 유형의 사용자 조작을 순조롭게 처리하는 것은 양호한 사용자 체험을 얻는 데 매우 중요하다.오늘 우리는 마우스 클릭 이벤트를 예로 들어 자바스크립트 이벤트를 효과적으로 처리하는 방법을 배울 것이다.
 
addEventListener 방법
JavaScript에는 HTML 노드에 추가할 수 있는 addEventListener라는 내장 메서드가 있습니다.다음과 같이 총 3개의 매개변수가 포함되어 있습니다.

활동 이름.

지정한 이벤트를 터치할 때 일부 코드를 실행하는 리셋 함수입니다.

옵션: 캡처된 부울 값.(기본값은 false)입니다.

 

<div id="div1">I am a div1</div>

const div1 = document.getElementById("div1");

div1.addEventListener("click", function() {
  console.log("div1 clicked");
});

예상한 대로, "나는div"텍스트를 누르면 컨트롤러에 "div1 clicked"를 출력합니다.텍스트를 HTML에 새 div로 포장합니다.만약 당신이 텍스트를 눌렀다면, 당신은 현재의 출력이 무엇인지 알아맞힐 수 있습니까?

<div id="div1">
  <div id="div2">I am a div1</div>
</div>

const div1 = document.getElementById("div1");

div1.addEventListener("click", function() {
  console.log("div1 clicked");
});

결과는 변하지 않고 "나는div1"을 출력합니다. id가 "div2"인div를 눌렀음에도 불구하고.
 

사건이 터지다
기본적으로 이벤트는 JavaScript에서 발생합니다.이벤트 거품이란 이벤트가 가장 내부에 끼워 넣은 HTML 요소로부터 시작하여 DOM 차원 구조에서 이벤트를 탐지하는 요소에 도달할 때까지 위로 이동하는 것을 말한다.이런 행위를 사건 전파나 사건 위임이라고도 부른다.
위의 예에서 텍스트 "I am a div1"을 클릭하면 #div2를 클릭하는 것과 같습니다.부모 요소 #div1에 이벤트 감청기가 있기 때문에 이벤트는 가장 내부의 하위 요소 #div2를 시작하고 거품을 일으킨다.
여기에 또 하나의 예가 있다.JavaScript에서 div2에 이벤트 탐지기를 추가합니다.

<div id="div1">
  <div id="div2">I am a div</div>
</div>

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");

div1.addEventListener("click", function() {
  console.log("div1 clicked");
});
div2.addEventListener("click", function() {
  console.log("div2 clicked");
});

다음은 사건이 터진 결과다.

div2 clicked
div1 clicked

html과body와 같은 이벤트 감청기를 뿌리 단계의 요소에 추가할 수 있습니다. 이벤트는 그때까지 거품이 생길 것입니다.계층 구조입니다.
대상 -> 본문 -> HTML-> 문서 -> 창
 

전파를 멈추다
때때로 이벤트가 어느 방향으로 이동하기를 원하지 않으면 이벤트 대상의 stopPropagation() 을 사용할 수 있습니다.이벤트 대상은 리셋 함수의 매개 변수로 제공됩니다.

...

div2.addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("div2 clicked");
});

결과:

div2 clicked

 

이벤트 거품의 실제 응용
만약 당신이 순수한 자바스크립트로 업무 목록 프로그램을 만들고 있다면, 사용자는 업무 목록을 클릭하여 왔다 갔다 전환할 수 있습니다.모든 업무 항목에 단독 사건 탐지기를 추가하는 것은 불합리하다.

명단이 길어질 수 있습니다.(이 과정은 지루해진다. 그래, 이벤트 감청기를 추가하기 위해 순환을 실행할 수 있지만, 한 응용 프로그램에 너무 많은 이벤트 감청기가 브라우저 메모리를 소모하고 응용 속도를 떨어뜨린다)

새로운 업무 내용을 동적으로 추가할 수 있습니다.(이벤트 탐지기를 추가할 수 없음)

우리는 이벤트 탐지기를 목록을 포함하는 부모 요소에 추가해서 이 문제를 해결할 수 있다.아래의 코드가 무엇을 하는지 자세히 보아라.

<ul class="list">
    <li class="item">Wash dishes</li>
    <li class="item">Walk your dog</li>
</ul>

.completed {
    text-decoration: line-through;
}

const list = document.querySelector(".list");

list.addEventListener("click", e => {
    e.target.classList.toggle("completed")
})

항목을 클릭하면 클래스 completed 를 특정 요소로 전환하여 텍스트에 가로줄을 추가합니다.그것 또한 target 속성을 가진 이벤트 대상을 생성한다.Usinge.target은 클릭한 DOM을 가리키며 classList와 toggle를 추가하여 클래스를 전환할 수 있습니다.
 

목표 대 현재 목표
이것은 네가 만날 수 있는 흔한 면접 문제다.target은 이벤트를 트리거하는 DOM을 가리킨다는 것을 방금 알았습니다.CurrentTarget은 이벤트 탐지기가 수신 중인 DOM을 참조합니다.함수e.target와 e.currentTarget를 기록합시다.

const list = document.querySelector(".list");

list.addEventListener("click", e => {
    console.log(e.target); // <li class="item completed">Walk your dog</li>
    console.log(e.currentTarget); // <ul class="list"></ul>
    e.target.classList.toggle("completed")
})

만약에 부모 요소에 이벤트 감청기가 있지만 우리가 하위 요소에서 이벤트 전파를 멈추면currentTarget는 전파를 멈추는DOM을 가리킨다
 

이벤트 캡처
이 옵션을 사용하려면 true 을 세 번째 인자로addeventListener 방법에 전달하십시오.

Element.addEventListener("click", function(){}, true);

이런 유형의 전파는 매우 적게 사용된다.그것은 안에서 밖으로 일하는 것이 아니라 방향을 바꾸어 밖에서 안으로 일한다.이것은 차원 구조다.
창 -> 문서 -> HTML-> 본문 -> 대상
따라서 이벤트가 수사 중인 부모 요소를 먼저 가져오려면 이 옵션을 사용하십시오.우리들은 앞의 예를 사용하자.

<div id="div1">
  <div id="div2">I am a div</div>
</div>

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");

div1.addEventListener("click", function() {
  console.log("div1 clicked");
}, true);
div2.addEventListener("click", function() {
  console.log("div2 clicked");
});

결실

div1 clicked
div2 clicked

 

요약
사용자의 상호작용에 귀를 기울이고 이를 정확하게 처리하는 것이 버그 없는 프로그램을 만드는 첫걸음이다.기억해라, 거품은 실제로 안에서 밖으로 나오는 거품이며, 포착은 사건이 실패할 때 발생하는 것이다!읽어주셔서 감사합니다!