- 相關(guān)推薦
如何理解jquery事件冒泡
一、什么是jquery事件冒泡
在很多教材或者手冊都可能會(huì)涉及到事件冒泡的概念,老手來說這當(dāng)然是最基本的概念,但往往對于初學(xué)者可能比較陌生或者說從來沒有聽說過。下面就結(jié)合代碼實(shí)例來簡單介紹一下什么是事件冒泡。
代碼實(shí)例如下:
點(diǎn)擊查看效果
在以上代碼中,我們可能只想點(diǎn)擊錨點(diǎn)后彈出“我是third”,但是令人奇怪的事情卻是所有父元素定義的click事件都會(huì)被觸發(fā)。這就是一個(gè)典型的事件冒泡效果。所謂的冒泡事件就是,如果在某一個(gè)對象上觸發(fā)某一類事件(如上例的click事件),那么此事件會(huì)向?qū)ο蟮母讣墝ο髠鞑,并觸發(fā)父對象上定義的同類事件。事件傳播的方向是從最底層到最頂層,類似于水泡從水底浮上來一般。
二、javascript如何阻止事件冒泡
冒泡事件能夠帶來便利,有時(shí)候也會(huì)帶來麻煩,下面就簡單介紹一下如何阻止事件冒泡。
代碼實(shí)例如下:
#grandfather{ border:1px solid #0066FF; cellpadding:0px; cellspacing:0px;}#grandfather td{ border: 1px solid #0066FF;}
沒有阻止事件冒泡 | 阻止了事件冒泡 |
代碼注釋:
1.if(window.event)這個(gè)用來兼容IE8和IE8一下瀏覽器。
2. evt.stopPropagation()這個(gè)是標(biāo)準(zhǔn)瀏覽器。
以上代碼中,一個(gè)單元格阻止了事件冒泡,一個(gè)沒有阻止事件冒泡,希望對大家的學(xué)習(xí)有所幫助。
【如何理解jquery事件冒泡】相關(guān)文章:
閱讀理解的答題技巧02-03
英語閱讀理解題09-22
英語閱讀理解帶翻譯03-21
高三英語閱讀理解06-08
初三英語閱讀理解06-14
怎樣理解網(wǎng)球運(yùn)動(dòng)12-13
中考英語閱讀理解及解析03-25
對企業(yè)文化的理解與認(rèn)識11-29