JavaScript의 이벤트 버블링 및 캡처에 대해 자세히 알아보세요.
- 青灯夜游앞으로
- 2022-08-04 21:01:082528검색
이 기사에서는 이벤트 버블링 및 캡처를 안내하고 js 이벤트 대상 검색 방법(버블링 및 캡처), 이벤트 프록시, e.target과 e.currentTarget의 차이점, 버블링 및 캡처 방지 및 취소를 이해하도록 설명합니다. default.event가 모두에게 도움이 되기를 바랍니다!
1. EventTarget 이벤트 대상을 찾는 방법(버블 및 캡처)
이벤트 대상은 이벤트가 바인딩된 요소인 elemet.addEventListener('click',function(){})를 참조합니다. 여기 요소가 이벤트 대상입니다.
버블링 및 캡처:
-
버블 이벤트:
- 이벤트는 기본적으로 상향식 버블링 방식으로 실행됩니다. 클릭 이벤트를 예로 들면, 하위 요소를 클릭하면 상위 요소 이상의 클릭 이벤트도 트리거될 수 있습니다. 이벤트 실행 순서는 아래에서 위로, 즉 버블링 이벤트입니다.
-
캡처 이벤트:
- 물론, 하향식 캡처 방법인 또 다른 실행 방법도 있습니다. 여전히 클릭 이벤트를 예로 들면, 하위 요소가 클릭 이벤트에 바인딩되어 있고 하위 요소를 클릭하면 상위 요소와 그 위 요소에 바인딩된 클릭 이벤트도 실행됩니다. 이벤트 실행 순서는 위에서 아래로 캡처 이벤트입니다.
addEventListener(type,listener,useCapture) 단순 분석:
- type: 이벤트 유형
- listener: 이벤트 청취 처리 기능
- useCapture: 이벤트 검색 방법 설정
- false, 버블링 이벤트 (기본값)
- true, 이벤트 캡처
매개변수 사용 캡처 구문 분석:
핵심! ! 이벤트 대상을 트리거하는 전체 프로세스는 두 단계(캡처 및 버블링)로 나뉩니다. useCapture 이 값은 이벤트 대상 트리거가 실행되는 단계를 결정합니다.
버블링 및 캡처 순서 분석:
- 그림에서 볼 수 있듯이 이벤트 캡처가 먼저 발생한 다음 이벤트 버블링이 이어집니다. 이벤트 캡처는 위에서 아래로(외부 이벤트가 먼저 트리거됨) 이루어지며, 이벤트 버블링은 아래에서 위로(내부 이벤트가 먼저 트리거됨) 진행됩니다.
- 포착하는 과정은 불특정에서 특정으로, 버블링의 과정은 특정에서 불특정으로 진행됩니다.
-
캡처 우선이지만 버블링 이벤트가 기본 전달 방법입니다. 즉, 기본적으로 버블링 단계에서 이벤트가 트리거됩니다.捕获优先，但是冒泡事件是传递的默认方式。意思就是事件默认都是在冒泡阶段触发。 重点！！事件目标的查找分为“冒泡”与“捕获”两个阶段，事件目标触发的顺序取决于在哪个阶段。如果嵌套的元素中既有捕获又有冒泡的那么一定是捕获优先，捕获阶段的事件执行完毕再执行冒泡阶段的事件。
代码演示：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(){
console.log("这是div1的点击事件");
},false);
div2.addEventListener('click',function(){
console.log("这是div2的点击事件");
},false);
div3.addEventListener('click',function(){
console.log("这是div3的点击事件");
},false);
</script>
当我们点击div3，如下从控制台结果可以看出，这里的事件都是在冒泡阶段执行。
还是点击div3，我们将div1.addEventListener第三个参数改为true，如下可以看出div1最先执行，说明捕获阶段优先于冒泡阶段。
这里看完一定要敲一下，我并没有列举所有的情况，其余的情况留给你们去尝试再总结（能理解上面的就够了，真正编码不会很复杂）。
如上就是我对事件目标查找的两种机制冒泡与捕获理解。
二、事件代理机制（事件委托）
利用事件冒泡完成事件代理机制：
- 列表1
- 列表2
当我们要给如上列表中的li都绑定一个点击事件点击获取li中的内容，一般是利用for遍历元素绑定点击事件。
let lis = document.querySelectorAll('li');
for (let i = 0; i <p>假如我们有1w个 <code>li</code> 节点，使用如上方式就需要绑定1w个事件，这样操非常影响代码性能。所以我们可以利用冒泡机制来解决如上的问题，就是将事件绑定到父元素身上 <code>ul</code> 身上。看如下代码：</p><pre class="brush:php;toolbar:false">
- 列表1
- 列表2
事件对象(e)：无论是addEventListener绑定事件还是直接“.事件名”，事件监听的处理函数中的第一个参数为 事件对象포인트! ! 이벤트 대상 검색은 "버블"과 "캡처"의 두 단계로 구분됩니다. 이벤트 대상이 트리거되는 순서는 어느 단계에 따라 다릅니다. 중첩된 요소에 캡처와 버블이 모두 있는 경우 캡처가 우선적으로 적용되어야 합니다. 캡처 단계의 이벤트가 실행된 후 버블링 단계의 이벤트가 실행됩니다.
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.onclick = function (e) {
alert('div1');
}
div2.onclick = function (e) {
e.stopPropagation();
alert('div2');
}
div3.onclick = function (e) {
alert('div3');
}
</script>
🎜div3을 클릭하면 아래 콘솔 결과에서 볼 수 있듯이 여기 이벤트는 모두 버블링 단계에서 실행됩니다. 🎜🎜🎜🎜아직도 div3을 클릭하면 div1.addEventListener의 세 번째 매개변수를 true로 변경합니다. 아래에서 볼 수 있듯이 div1이 먼저 실행되어 캡처 단계가 버블링 단계보다 우선함을 나타냅니다. 🎜🎜
🎜🎜여기 모든 상황을 나열한 것은 아니며, 나머지 상황은 여러분이 직접 해보고 요약해 보시기 바랍니다. (위 내용을 이해하시면 충분하며, 실제 코딩은 그리 복잡하지 않습니다.) 🎜🎜위는 이벤트 대상 검색의 두 가지 메커니즘인 버블과 캡처에 대해 제가 이해한 것입니다. 🎜🎜2. 이벤트 프록시 메커니즘(이벤트 위임)🎜🎜🎜🎜이벤트 버블링을 사용하여 이벤트 프록시 메커니즘을 완성하세요.🎜🎜🎜
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(e){
console.log('div1');
},true);
div2.addEventListener('click',function(e){
console.log('div2');
e.stopPropagation();
},true);
div3.addEventListener('click',function(e){
console.log('div3');
},true);
</script>
🎜위 목록의 li에 클릭을 바인딩하려는 경우 클릭 이벤트는 li의 콘텐츠를 가져옵니다. 일반적으로 for는 클릭 이벤트를 바인딩하기 위해 요소를 순회하는 데 사용됩니다. 🎜div.addEventListener('click',function(e){
if(event.target == event.currentTarget){
//需要执行的代码
}
});🎜 li 노드가 10,000개라면 위의 방법으로 10,000개의 이벤트를 바인딩해야 하는데, 이는 코드 성능에 큰 영향을 미칩니다. 따라서 우리는 이벤트를 상위 요소 ul에 바인딩하는 버블링 메커니즘을 사용하여 위의 문제를 해결할 수 있습니다. 다음 코드를 보세요: 🎜
<a>点击跳转</a>
<script>
let a = document.querySelector('a');
addEventListener('click',function(e){
e.preventDefault();
})
</script>
🎜🎜Event 객체(e): addEventListener 바인딩 이벤트이든 직접 ".event 이름"이든 이벤트 수신 처리 함수의 첫 번째 매개변수는 이벤트 객체입니다. 이벤트 개체에는 이벤트에 대한 자세한 정보가 포함됩니다. 예를 들어 이 개체에는 🎜이벤트 소스, 이벤트 ID, 이벤트 유형, 이벤트 바인딩 요소, 이벤트가 트리거될 때 클릭한 위치 등이 포함됩니다. 🎜e.target은 이 이벤트를 트리거한 소스인 이벤트 소스에 액세스할 수 있습니다. 🎜🎜既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“e.target”+“冒泡机制”就可以减少事件的绑定，能提升不少的性能。
依次点击列表1与列表2：
总结：通过上面代码我们知道了“事件对象”+“冒泡机制”可以实现事件委托。事件委托就是当事件触发时，通过事件冒泡(或事件捕获)把要做的事委托给父元素来处理。
三、e.target与e.currentTarget的区别：
- e.target 指向的是触发事件监听的对象（事件源）。
- e.currentTarget 指向添加监听事件的对象（绑定事件的dom元素）。
四、阻止冒泡与捕获
为什么要阻止冒泡或捕获？
点击当前元素时以冒泡的方式传递事件如果上级元素绑定了同样的事件，就会因为冒泡传递导致触发。同样捕获的过程中，也会触发与当前元素绑定的相同事件的上级。只是触发顺序不同。
事件代理一般使用的冒泡，当然阻止冒泡一般不会影响事件代理，因为顺序问题只会影响捕获事件，这也是为什么都使用冒泡实现事件代理机制。
阻止冒泡或捕获的方法
这里我不考虑兼容性问题，我相信不久将来兼容性可以得到解决。
阻止冒泡w3c推介的方法是event.stopPropagation()，顾名思义停止传播，他是事件对象（event）的方法，此方法是阻止目标元素的继续冒泡（或捕获）。
event.stopPropagation()阻止冒泡：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.onclick = function (e) {
alert('div1');
}
div2.onclick = function (e) {
e.stopPropagation();
alert('div2');
}
div3.onclick = function (e) {
alert('div3');
}
</script>
上面代码默认都是冒泡事件，我们点击div3会依次弹出’div3’与’div2’，为什么没有弹出’div1’这是因为e.stopPropagation();阻止了目标元素的事件继续冒泡到上级。如果每个点击事件都加上了e.topPropagation就不会出现多弹窗的情况。
event.stopPropagation()阻止捕获：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(e){
console.log('div1');
},true);
div2.addEventListener('click',function(e){
console.log('div2');
e.stopPropagation();
},true);
div3.addEventListener('click',function(e){
console.log('div3');
},true);
</script>
当我们点击div2会依次弹出’div1’与’div2’，这也是因为在div2事件中我们设置了e.stopPropagation()，阻塞了目标元素的事件继续向下捕获。
event.target == event.currentTarget：
div.addEventListener('click',function(e){
if(event.target == event.currentTarget){
//需要执行的代码
}
});
此方法不过多解释用的不多，如果你理解了上面的内容，这个方法也能理解。
五、补充:为什么要使用addEventListener()
从上面代码不难看出addEventListener()有如下的优点（以下是MDN的原话）：
addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：
- 它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。
- 它提供了一种更精细的手段控制
listener的触发阶段。（即可以选择捕获或者冒泡）。 - 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。
六、取消默认事件
event.preventDefault()
默认事件指的是<a href=""></a>，<input type="submit"> 标签这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生。
<a>点击跳转</a>
<script>
let a = document.querySelector('a');
addEventListener('click',function(e){
e.preventDefault();
})
</script>
那么我们如何才能知道一个标签是否有默认事件，打印事件对象的cancelable属性，通过事件执行就可以知道e.cancelable的结果，如果为false表示有默认事件，true则没有。
return false;
事件执行函数中设置return false取消默认事件，但此方法不常用。
【相关推荐：javascript学习教程】
위 내용은 JavaScript의 이벤트 버블링 및 캡처에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!