JavaScript 버블링 및 캡처 소개(코드 포함)

이 글은 JavaScript 버블링 및 캡처(코드 포함)에 대한 지식을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

JS 버블링 및 캡처란 무엇인가요?

버블링 및 캡처는 요소에서 이벤트가 트리거될 때 js가 이벤트를 전달하는 두 가지 방향 또는 프로세스를 나타냅니다.

머리말:

예를 들어 이런 페이지와 js 메소드가 있습니다.

Less: Less 환경이 아니라면 이 문단은 무시하셔도 됩니다.

.level {
  padding: 50px 80px;
}

.level-template(@level: 1, @color: #fff){
  background-color: darken( @color , 5% * @level);
}

#lv1{ .level-template(1)}
#lv2{ .level-template(2)}
#lv3{ .level-template(3)}
#lv4{ .level-template(4)}

HTML

<div>
    <div>
        <div>
            <div>

            </div>
        </div>
    </div>
</div>

JS

function $(id) {
    return document.getElementById(id);
}

window.onload = () => {
    $('lv1').addEventListener("click",()=>{console.log('lv1')},true);
    $('lv2').addEventListener("click",()=>{console.log('lv2')},true);
    $('lv3').addEventListener("click",()=>{console.log('lv3')},true);
};
// 上面的 () => {} 为 ES6 的匿名方法的定义方式
// 等同于
function () {
    console.log('lv1')
}

위 js의 기능:
페이지가 로드될 때 세 개의 div에 클릭 모니터링 방법을 추가합니다. 클릭하면 자체 ID 값이 콘솔에 출력됩니다. .

페이지 구조는 다음과 같습니다. lv1에는 lv2가 포함되어 있고, lv2에는 lv3이 포함되어 있습니다. lv3을 클릭하면 lv3이 lv2 안에 있기 때문에 실제로는 lv2와 lv1을 클릭하게 됩니다. 즉, lv2와 lv1에서 lv3을 클릭하면 3개의 클릭 이벤트가 발생합니다.
이 세 가지 이벤트가 발생하는 순서를 소위 버블링 및 캡처라고 합니다.

이벤트 트리거가 진행되는 세 단계:

1. 캡처 단계: 먼저 문서 document의 루트 노드에서 이벤트 트리거 개체로 이동하여 외부에서 이벤트 개체를 캡처합니다. in;
document 往事件触发对象，从外向内捕获事件对象；
2. 定位目标：寻找到目标事件位置（事发地），触发事件；
3. 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

1. 捕获阶段

如上面的例子，在 lv3 被点击的时候，js 会从文档的最上层开始，由外向内寻找点击事件的起源，也就是 lv3。那么这个由外向内的过程就是 lv1 --> lv2 --> lv3，这三个 p 的 click 事件按照这个过程依次被触发。
这个触发的方向就是捕获的方向。

2. 冒泡阶段

在找到被点击的 lv3 之后，事件向上传递，过程是 lv3 --> lv2 --> lv1，此时依次触发 lv3、lv2、lv1 的 click 事件，这个由内向外的触发过程就称为冒泡

再回看一下最常用的事件绑定方法的格式：

element.addEventListener(event, function, useCapture)

这里面，useCapture 是个布尔值，用于定义事件是在冒泡阶段触发，还是在捕获阶段触发，默认值是 false，代表在冒泡时触发。

此时你就会知道上面那个例子里定义的 click 方法是在 捕获阶段 执行，那么返回的结果就是

lv1
lv2
lv3

如果最上面的例子，onload 内容是这样的

 window.onload = () => {
        $('lv1').addEventListener("click",()=>{console.log('lv1')},false);
        $('lv2').addEventListener("click",()=>{console.log('lv2')},false);
        $('lv3').addEventListener("click",()=>{console.log('lv3')},false);
    };

那么也就是说， click 事件在 冒泡阶段

대상 찾기

: 대상 이벤트의 위치(사건이 발생한 곳)를 찾아 이벤트를 트리거합니다. Bubble stage

: 그런 다음 대상 이벤트 위치에서 역추적합니다. 문서의 루트 노드를 만들고 이벤트 개체를 안쪽에서 바깥쪽으로 버블링합니다.

1. 캡처 단계

위의 예와 같이 lv3을 클릭하면 js는 문서의 최상위 레이어부터 시작하여 외부에서 안쪽으로 클릭 이벤트의 출처를 찾습니다. 레벨3입니다. 그러면 외부에서 내부로의 이 프로세스는 lv1 --> lv2 --> lv3 입니다. 이 프로세스에 따라 이 세 p의 클릭 이벤트가 순차적으로 발생합니다.

이 트리거의 방향은 캡처 방향입니다.

🎜2. 버블링 단계🎜🎜클릭된 lv3을 찾은 후 이벤트가 lv3 --> lv2 --> lv1로 전달됩니다. 이는 내부에서 발생하는 트리거링 프로세스를 버블링이라고 합니다🎜🎜가장 일반적으로 사용되는 이벤트 바인딩 방법의 형식을 다시 살펴보겠습니다.🎜

lv3
lv2
lv1

🎜여기서 useCapture는 이벤트 여부를 정의하는 데 사용되는 부울 값입니다. 버블링 단계에서 트리거되거나 캡처 단계 중에 트리거됨. 기본값은 버블링 시 트리거됨을 의미합니다. 🎜🎜이쯤 되면 위의 예시에서 정의한 click 메소드가 캡쳐 단계에서 실행되어 반환되는 결과가 🎜rrreee🎜라는 것을 알 수 있을 것입니다. 상단 예시의 경우 온로드 내용은 🎜rrreee🎜즉, , 클릭 이벤트는 버블링 단계에서 트리거되고 반환된 결과는 🎜rrreee🎜🎜Summary🎜🎜🎜입니다. 버블링과 캡처 간의 관계는 포함 및 캡처에만 나타납니다. 포함된 구조 에서는 형제 사이에 그러한 관계가 없습니다. 🎜버블링과 캡처는 방향이 다를 뿐입니다. 🎜🎜🎜

위 내용은 JavaScript 버블링 및 캡처 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!