在學校,聽老師講解事件冒泡和事件捕獲機制的時候跟聽天書一樣,只依稀記得IE使用的是事件冒泡,其他瀏覽器則是事件捕獲。當時的我,把它當成IE瀏覽器兼容問題,所以沒有深究(IE8以下版本的瀏覽器已基本退出市場)。工作至今,雖然多次遇到該類問題,但均未深究,始終一知半解,遇到了全TM靠猜(選A不行就選B唄)。今天閑來無事自己做了個demo,算是把這個問題徹底搞明白了。
先上結(jié)論:他們是描述事件觸發(fā)時序問題的術(shù)語。事件捕獲指的是從document到觸發(fā)事件的那個節(jié)點,即自上而下的去觸發(fā)事件。相反的,事件冒泡是自下而上的去觸發(fā)事件。綁定事件方法的第三個參數(shù),就是控制事件觸發(fā)順序是否為事件捕獲。true,事件捕獲;false,事件冒泡。默認false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡,意思就是到我為止,我的爹和祖宗的事件就不要觸發(fā)了。
這是HTML結(jié)構(gòu)
<p id="parent"> <p id="child" class="child"></p> </p>
現(xiàn)在我們給它們綁定上事件
結(jié)果:
child事件被觸發(fā),child
parent事件被觸發(fā),parent
結(jié)論:先child,然后parent。事件的觸發(fā)順序自內(nèi)向外,這就是事件冒泡。
現(xiàn)在改變第三個參數(shù)的值為true
結(jié)果:
parent事件被觸發(fā),parent
child事件被觸發(fā),child
結(jié)論:先parent,然后child。事件觸發(fā)順序變更為自外向內(nèi),這就是事件捕獲。
貌似沒什么卵用,上一個利用事件冒泡的案例,反正我是經(jīng)常會用到。
<ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul>
需求是這樣的:鼠標放到li上對應(yīng)的li背景變灰。
利用事件冒泡實現(xiàn):
也許有人會說,我們直接給所有l(wèi)i都綁上事件也可以啊,一點也不麻煩,只要……
是,這樣也行。而且從代碼簡潔程度上,兩者是相若仿佛的。但是,前者少了一個遍歷所有l(wèi)i節(jié)點的操作,所以在性能上肯定是更優(yōu)的。
還有就是,如果我們在綁定事件完成后,頁面又動態(tài)的加載了一些元素……
$("<li>item7</li>").appendTo("ul");
這時候,第二種方案,由于綁定事件的時候item7還不存在,所以為了效果,我們還要給它再綁定一次事件。而利用冒泡方案由于是給ul綁的事件……
高下立判!
上面是我整理給大家的,希望今后會對大家有幫助。
相關(guān)文章:
ng-repeat渲染完成如何用AngularJS監(jiān)聽
用p5.js制作煙花特效的示例代碼_javascript技巧
JS+PHP往類動態(tài)添加方法
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com