js事件の泡事件を理解して、事件の捕獲を依頼します.

8216 ワード

js事件勃発
javascriptの事件の伝播過程の中で、事件が一つの元素の上で出発した後に、事件は段階的に先輩の元素に伝播して、documentまで、あるブラウザはwindowまでかもしれなくて、これは事件の泡が現れます.
             ブトン    


<p class=「pre」let btnclick=document.getElement ById('col');br/>btnclick.onclick=function(e){br/>    consolie.log('1');
;;;;p>
<p class=「pre」<script/>



<p><span style=“font-family:宋体;”の実行結果をクリックして、a<span style=“font-family:Calibri;”を出力することもできます.しかしa元素は結合されていません.:Calibri;」aaspan stystyyyyyle========""""<div特別説明focusload
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • <span style="color: #000000;"> let ptclick </span>= document.getElementById('getNum'<span style="color: #000000;">); let lilist </span>= ptclick.querySelectorAll('li'<span style="color: #000000;">); </span><span style="color: #0000ff;">for</span>(let i=0;i<lilist.length;i++<span style="color: #000000;">){ lilist[i].index </span>=<span style="color: #000000;"> i; }; ptclick.onclick </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">(e){ </span><span style="color: #0000ff;">var</span> e = e ||<span style="color: #000000;"> window.event; </span><span style="color: #0000ff;">var</span> target = e.target ||<span style="color: #000000;"> e.srcElement; console.log(e.target.index); }; </span>

    点击每个li元素都会打印对应的目标liindex值;

    但是并不是所有的情况都适用于事件冒泡的,当出现父子级之间的注册事件不一致时,就不适用。关于事件委托更加详细的解释,查https://www.cnblogs.com/liugang-vip/p/5616484.html

    每个例子都很详细的分析了。

     

    js事件捕获

    事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素

    DOM标准同时支持捕获事件模型和冒泡事件模型,但是,捕获事件模型先发生。两种事件流都会触发DOM中的所有对象,从document对象开始,也在document对象结束。

    js事件捕获一般通过DOM2事件模型addEventListener来实现的:

    target.addEventListener(type, listener, useCapture)

    第三个参数默认设置为false,表示在冒泡阶段出发事件,设置为true时表示在捕获阶段触发,一般我们工作中似乎很少使用事件捕获。但还是要理解一下,面试过程中没少问过这类问题。

    分析例子:

    <span style="color: #008000;">//</span><span style="color: #008000;"> </span> window.onload=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ let box</span>=document.getElementById("box"<span style="color: #000000;">); let middle</span>=document.getElementById("middle"<span style="color: #000000;">); let inner</span>=document.getElementById("inner"<span style="color: #000000;">); box.addEventListener(</span>"click",<span style="color: #0000ff;">function</span>(){console.log("box")},<span style="color: #0000ff;">true</span><span style="color: #000000;">); middle.addEventListener(</span>"click",<span style="color: #0000ff;">function</span>(){console.log("middle")},<span style="color: #0000ff;">true</span><span style="color: #000000;">); inner.addEventListener(</span>"click",<span style="color: #0000ff;">function</span>(){console.log("inner")},<span style="color: #0000ff;">true</span><span style="color: #000000;">); } </span>

    当点击inner绑定事件时,控制台会直接输出,boxmiddle,inner

     

    js阻止事件冒泡

    平时开发过程中,会用到大量的事件冒泡事件,但是可能我们在某个子级标签不需要传递事件给父级,这时候就需要阻止它事件的冒泡。

    一般,使用stopPropagation来阻止事件的冒泡,IE中使用cancleBuble=truestopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。

    接上面事件冒泡的例子:

    //      
    let btna = document.getElementById('btn');
    btna.onclick=function(e){
        window.event? window.event.cancelBubble = true : e.stopPropagation();
     };

    この時、a//阻止浏览器的默认行为 function stopDefault( e ) { //一般情况下 if ( e && e.preventDefault ) e.preventDefault(); //IE中 else window.event.returnValue = false; return false; }