- 相關(guān)推薦
如何理解jquery事件冒泡
一、什么是jquery事件冒泡
在很多教材或者手冊(cè)都可能會(huì)涉及到事件冒泡的概念，老手來(lái)說(shuō)這當(dāng)然是最基本的概念，但往往對(duì)于初學(xué)者可能比較陌生或者說(shuō)從來(lái)沒(méi)有聽說(shuō)過(guò)。下面就結(jié)合代碼實(shí)例來(lái)簡(jiǎn)單介紹一下什么是事件冒泡。
代碼實(shí)例如下:
點(diǎn)擊查看效果
在以上代碼中，我們可能只想點(diǎn)擊錨點(diǎn)后彈出“我是third”，但是令人奇怪的事情卻是所有父元素定義的click事件都會(huì)被觸發(fā)。這就是一個(gè)典型的事件冒泡效果。所謂的冒泡事件就是，如果在某一個(gè)對(duì)象上觸發(fā)某一類事件（如上例的click事件），那么此事件會(huì)向?qū)ο蟮母讣?jí)對(duì)象傳播，并觸發(fā)父對(duì)象上定義的同類事件。事件傳播的方向是從最底層到最頂層，類似于水泡從水底浮上來(lái)一般。
二、javascript如何阻止事件冒泡
冒泡事件能夠帶來(lái)便利，有時(shí)候也會(huì)帶來(lái)麻煩，下面就簡(jiǎn)單介紹一下如何阻止事件冒泡。
代碼實(shí)例如下:
#grandfather{ border:1px solid #0066FF; cellpadding:0px; cellspacing:0px;}#grandfather td{ border: 1px solid #0066FF;}
| 沒(méi)有阻止事件冒泡 | 阻止了事件冒泡 |
代碼注釋:
1.if(window.event)這個(gè)用來(lái)兼容IE8和IE8一下瀏覽器。
2. evt.stopPropagation()這個(gè)是標(biāo)準(zhǔn)瀏覽器。
以上代碼中，一個(gè)單元格阻止了事件冒泡，一個(gè)沒(méi)有阻止事件冒泡，希望對(duì)大家的學(xué)習(xí)有所幫助。
【如何理解jquery事件冒泡】相關(guān)文章：
jQuery(js)如何獲取文字寬度(顯示長(zhǎng)度)03-29
jquery提交按鈕的代碼03-30
如何理解經(jīng)營(yíng)租賃03-04
如何理解“國(guó)學(xué)”概念12-18
jQuery程序設(shè)計(jì)03-30
英語(yǔ)閱讀時(shí)如何理解03-06
如何理解企業(yè)文化03-18
jQuery的DOM操作筆記03-29