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
lv2
lv1

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