Erfahren Sie mehr über das Bubbling und Erfassen von Ereignissen in JavaScript

Dieser Artikel führt Sie durch das Bubbling und Erfassen von Ereignissen und vermittelt Ihnen ein Verständnis für die Suchmethode für js-Ereignisziele (Bubbling und Capture), den Ereignis-Proxy, den Unterschied zwischen e.target und e.currentTarget, das Verhindern von Bubbling und Capture sowie das Abbrechen des Ereignisses Standardereignis, ich hoffe, es hilft allen!

1. So finden Sie das EventTarget-Ereignisziel (Sprudeln und Erfassen)

Das Ereignisziel bezieht sich auf das Element, an das das Ereignis gebunden ist, elemet.addEventListener('click',function(){}) Element hier Es ist das Ereignisziel.

Bubbling und Erfassung:

• Bubbling-Ereignisse:

  • Ereignisse werden standardmäßig in einer Bottom-up-Bubbling-Methode ausgeführt. Nehmen wir als Beispiel Klickereignisse: Wenn wir auf ein untergeordnetes Element klicken, können auch Klickereignisse auf dem übergeordneten Element und darüber ausgelöst werden. Die Reihenfolge der Ereignisausführung ist von unten nach oben, was dem sprudelnden Ereignis entspricht.

• Erfassungsereignis:

  • Natürlich gibt es noch eine andere Ausführungsmethode, nämlich die Top-Down-Erfassungsmethode. Nehmen wir weiterhin das Klickereignis als Beispiel: Wenn ein untergeordnetes Element an ein Klickereignis gebunden ist und wir auf das untergeordnete Element klicken, werden auch die an das übergeordnete Element und die darüber liegenden Elemente gebundenen Klickereignisse ausgeführt. Die Ausführungsreihenfolge der Ereignisse ist von oben nach unten, was dem Erfassungsereignis entspricht.

AddeventListener (Typ, Hörer, Verwendung) Einfache Analyse:

• Type: Ereignisart
• Listener: Ereignishörverarbeitungsfunktion
• usecapture: Setzen Sie die Ereignissuchmethode
  • False, sprudelnd (Standardwert)
  • true, Ereignis erfassen

Parameter verwendenCapture-Analyse:

Wichtiger Punkt! ! Der gesamte Prozess des Auslösens eines Ereignisziels ist in zwei Phasen unterteilt (Einfangen und Sprudeln). useCapture Dieser Wert bestimmt, in welcher Phase die Auslösung des Ereignisziels ausgeführt wird.

Sequenzanalyse von Sprudeln und Einfangen:

• Wie aus der Abbildung ersichtlich ist, folgt auf die Ereigniserfassung zunächst das Sprudeln des Ereignisses. Die Ereigniserfassung erfolgt von oben nach unten (externe Ereignisse werden zuerst ausgelöst) und das Ereignis-Bubbling erfolgt von unten nach oben (interne Ereignisse werden zuerst ausgelöst).
• Der Prozess des Einfangens verläuft von unspezifisch zu spezifisch, und der Prozess des Sprudelns verläuft von spezifisch zu unspezifisch.
• Obwohl Erfassung zuerst erfolgt, sind Bubbling-Ereignisse die Standardmethode für die Übermittlung. Dies bedeutet, dass Ereignisse standardmäßig in der Sprudelphase ausgelöst werden. 捕获优先，但是冒泡事件是传递的默认方式。意思就是事件默认都是在冒泡阶段触发。

• 重点！！事件目标的查找分为“冒泡”与“捕获”两个阶段，事件目标触发的顺序取决于在哪个阶段。如果嵌套的元素中既有捕获又有冒泡的那么一定是捕获优先，捕获阶段的事件执行完毕再执行冒泡阶段的事件。

代码演示：

    <div>
        这是div1
        <div>
            这是div2
            <div>这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.addEventListener(&#39;click&#39;,function(){
            console.log("这是div1的点击事件");
        },false);
        div2.addEventListener(&#39;click&#39;,function(){
            console.log("这是div2的点击事件");
        },false);
        div3.addEventListener(&#39;click&#39;,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
    

    <script> let ul = document.querySelector(&#39;ul&#39;); //我们可以通过事件对象（e）中的target属性可以访问到事件源（也就事件的触发元素） ul.addEventListener(&#39;click&#39;,function(e){ console.log(e.target.innerHTML); },false); </script>

事件对象(e)：无论是addEventListener绑定事件还是直接“.事件名”，事件监听的处理函数中的第一个参数为 事件对象Punkt! ! Die Suche nach Ereigniszielen ist in zwei Phasen unterteilt: „Blase“ und „Erfassung“. Die Reihenfolge, in der Ereignisziele ausgelöst werden, hängt von der Phase ab. Wenn in den verschachtelten Elementen sowohl Captures als auch Blasen vorhanden sind, muss das Capture Vorrang haben. Nachdem die Ereignisse in der Capture-Phase ausgeführt wurden, werden die Ereignisse in der Bubbling-Phase ausgeführt.

🎜🎜🎜🎜🎜Codedemonstration: 🎜🎜

    <div>
        这是div1
        <div>
            这是div2
            <div>这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.onclick = function (e) {
           alert(&#39;div1&#39;);
        }
        div2.onclick = function (e) {
           e.stopPropagation();
            alert(&#39;div2&#39;);
        }
        div3.onclick = function (e) {
           alert(&#39;div3&#39;);
        }
    </script>

🎜Wenn wir auf div3 klicken, werden die Ereignisse hier alle in der Bubbling-Phase ausgeführt, wie aus den Konsolenergebnissen unten hervorgeht. 🎜🎜🎜🎜Still Klicken Sie auf div3 und wir ändern den dritten Parameter von div1.addEventListener auf true. Wie unten zu sehen ist, wird div1 zuerst ausgeführt, was darauf hinweist, dass die Capture-Phase Vorrang vor der Bubbling-Phase hat. 🎜🎜🎜🎜hier Stellen Sie sicher, dass Sie es nach dem Lesen eingeben. Ich habe nicht alle Situationen aufgelistet, die Sie zusammenfassen müssen (es reicht aus, das oben Gesagte zu verstehen, und die eigentliche Codierung wird nicht sehr kompliziert sein). 🎜🎜Das Obige ist mein Verständnis der beiden Mechanismen für die Ereigniszielsuche, bubble und capture. 🎜🎜2. Ereignis-Proxy-Mechanismus (Ereignisdelegation) 🎜🎜🎜🎜Verwenden Sie Ereignis-Bubbling, um den Ereignis-Proxy-Mechanismus zu vervollständigen: 🎜🎜🎜

    <div>
        这是div1
        <div>
            这是div2
            <div>这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.addEventListener(&#39;click&#39;,function(e){
           	console.log(&#39;div1&#39;);
        },true);
        div2.addEventListener(&#39;click&#39;,function(e){
            console.log(&#39;div2&#39;);
            e.stopPropagation();
        },true);
        div3.addEventListener(&#39;click&#39;,function(e){
            console.log(&#39;div3&#39;);
        },true);
    </script>

🎜Wenn wir einen Klick an li in der obigen Liste binden möchten Der Ereignisklick erhält den Inhalt in li. Im Allgemeinen wird for zum Durchlaufen des Elements verwendet, um das Klickereignis zu binden. 🎜

div.addEventListener('click',function(e){
	if(event.target == event.currentTarget){
        //需要执行的代码
    }
});

🎜Wenn wir 10.000 li-Knoten haben, müssen wir 10.000 Ereignisse mit der oben genannten Methode binden, was sich stark auf die Codeleistung auswirkt. Wir können also den Bubbling-Mechanismus verwenden, um das obige Problem zu lösen, das darin besteht, das Ereignis an das übergeordnete Element ul zu binden. Schauen Sie sich den folgenden Code an: 🎜

   <a>点击跳转</a>
    <script>
        let a = document.querySelector(&#39;a&#39;);
        addEventListener(&#39;click&#39;,function(e){
            e.preventDefault();
        })
    </script>

🎜🎜Ereignisobjekt (e): Unabhängig davon, ob es sich um ein addEventListener-Bindungsereignis oder einen direkten „.event-Namen“ handelt, ist der erste Parameter in der Ereignisüberwachungsverarbeitungsfunktion Ereignisobjekt. Das Ereignisobjekt enthält detaillierte Informationen zum Ereignis. Dieses Objekt enthält beispielsweise: 🎜Ereignisquelle, Ereignis-ID, Ereignistyp, ereignisgebundenes Element, angeklickte Position, wenn das Ereignis ausgelöst wird, usw. 🎜Das e.target kann auf die Ereignisquelle zugreifen, die dieses Ereignis ausgelöst hat. 🎜🎜

既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“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(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.onclick = function (e) {
           alert(&#39;div1&#39;);
        }
        div2.onclick = function (e) {
           e.stopPropagation();
            alert(&#39;div2&#39;);
        }
        div3.onclick = function (e) {
           alert(&#39;div3&#39;);
        }
    </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(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.addEventListener(&#39;click&#39;,function(e){
           	console.log(&#39;div1&#39;);
        },true);
        div2.addEventListener(&#39;click&#39;,function(e){
            console.log(&#39;div2&#39;);
            e.stopPropagation();
        },true);
        div3.addEventListener(&#39;click&#39;,function(e){
            console.log(&#39;div3&#39;);
        },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(&#39;a&#39;);
        addEventListener(&#39;click&#39;,function(e){
            e.preventDefault();
        })
    </script>

那么我们如何才能知道一个标签是否有默认事件，打印事件对象的cancelable属性，通过事件执行就可以知道e.cancelable的结果，如果为false表示有默认事件，true则没有。

return false;

事件执行函数中设置return false取消默认事件，但此方法不常用。

【相关推荐：javascript学习教程】

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über das Bubbling und Erfassen von Ereignissen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!