奥门巴黎人手机网址【app】

JS的平地风波冒泡和事件捕获

2019-08-09 08:57·巴黎人线路检测中心

兴许有人会说,大家一向给全体li都绑上事件也得以啊,一点也不费事,只要……

       $("ul").on("mouseover",function(e){
                $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
            })

或然有人会说,大家一向给持有li都绑上事件也足以啊,一点也不劳动,只要……

false=冒泡

结论:先child,然后parent。事件的触及顺序自内向外,那便是事件冒泡。

       document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发,"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发,"+e.target.id)
            },true)
parent事件被触发,parent
child事件被触发,child

W3C模型 W3C模型是将二者进行平和,在W3C模型中,任何事件发生时,先从顶层开端开展事件捕获,直到事件触发达到了平地风波源成分。然后,再从事件源往上开始展览事件冒泡,直到到达document。

这是HTML结构

利用事件冒泡实现:

敲定:先parent,然后child。事件触发顺序更动为自外向内,那就是事件捕获。

科技世界,(1)冒泡型事件:事件依照从最特定的平地风波指标到最不特定的事件目的(document对象)的逐条触发。

parent事件被触发,parent
child事件被触发,child

近期大家给它们绑定上事件

转载自:​

附:事件冒泡(的长河):事件从产生的靶子(event.srcElement||event.target)开始,沿着文书档案逐层向上冒泡,到document停止。

  <ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

先上结论:他们是陈说事件触发时序难点的术语。事件捕获指的是从document到触发事件的不行节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件措施的第多少个参数,正是决定事件触发顺序是还是不是为事件捕获。true,事件捕获;false,事件冒泡。私下认可false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思正是到笔者得了,笔者的爹和祖辈的事件就无须接触了。

$("<li>item7</li>").appendTo("ul");

  Mozilla 1.0: div -> body -> html -> document -> window

   document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发,"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发,"+e.target.id)
  },true)

科技世界 1

结果:

ele.addEventListener('click',doSomething2,true)

  $("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })
    <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

是,那样也行。何况从代码简洁程度上,两者是相若似乎的。然而,前面叁个少了一个遍历全数li节点的操作,所以在性质上一定是更优的。

事件捕获 当您利用事件捕获时,父级成分先触发,子级成分后触发,即div先触发,p后接触。