如何理解jquery事件冒泡

一、什麼是jquery事件冒泡

如何理解jquery事件冒泡

在很多教材或者手冊都可能會涉及到事件冒泡的概念,老手來說這當然是最基本的概念,但往往對於初學者可能比較陌生或者說從來沒有聽說過。下面就結合代碼實例來簡單介紹一下什麼是事件冒泡。

代碼實例如下:

點擊查看效果

在以上代碼中,我們可能只想點擊錨點後彈出“我是third”,但是令人奇怪的事情卻是所有父元素定義的'click事件都會被觸發。這就是一個典型的事件冒泡效果。所謂的冒泡事件就是,如果在某一個對象上觸發某一類事件(如上例的click事件),那麼此事件會向對象的父級對象傳播,並觸發父對象上定義的同類事件。事件傳播的方向是從最底層到最頂層,類似於水泡從水底浮上來一般。

二、javascript如何阻止事件冒泡

冒泡事件能夠帶來便利,有時候也會帶來麻煩,下面就簡單介紹一下如何阻止事件冒泡。

代碼實例如下:

#grandfather{ border:1px solid #0066FF; cellpadding:0px; cellspacing:0px;}#grandfather td{ border: 1px solid #0066FF;}



沒有阻止事件冒泡阻止了事件冒泡


代碼註釋:

(t)這個用來兼容IE8和IE8一下瀏覽器。

2. Propagation()這個是標準瀏覽器。

以上代碼中,一個單元格阻止了事件冒泡,一個沒有阻止事件冒泡,希望對大家的學習有所幫助。