事件冒泡與預設行為

2022-01-23 12:29:39 字數 2874 閱讀 2164

在說事件冒泡之前,我們先說說事件物件(event)

在觸發dom上某個事件時,會產生乙個事件物件event,這個物件包含著所有事件有關的資訊(導致事件的元素、事件的型別、與特定事件相關的資訊)

所有瀏覽器都支援event物件,但支援方式不同

ie中的事件物件:window.event

/*

封裝event物件

ie:window.event

*/function

getevent(event)

什麼是事件冒泡即事件開始時由最具體的元素(文件中巢狀最深的那個元素)接收,然後逐級向上傳播到較不為具體的節點

所有瀏覽器都支援事件冒泡

>事件冒泡

title

>

<

meta

name

="description"

content

="">

<

meta

name

="keywords"

content

="">

<

link

href

=""rel

="stylesheet"

>

<

style

>

.one

.two

.three

style

>

<

script

src

= ""

>

script

>

<

script

>

$(function

());

$(".two

").click(

function

(event) );

$(".three

").click(

function

(event) );

});script

>

head

>

<

body

>

<

div

class

="one"

>

我是one(div)

<

p class

="two"

>

我是two(p)

<

span

class

="three"

>我是three(span)

span

>

p>

div>

body

>

html

>

當在span、p、div元素上各繫結乙個click事件,當單擊span元素時,會依次觸發三個事件,即span、p、div元素上的click事件,這就是事件冒泡,按照dom層次結構像水泡一樣不斷向上直至頂端

阻止事件冒泡dom中提供stoppropagation()方法,但ie不支援,使用event物件在事件函式中呼叫就行

ie中提供的是,cancelbubble屬性,預設為false,當它設定為true時,就是阻止事件冒泡,也是用event物件在事件函式中呼叫

/*

封裝事件冒泡函式:

document.all:判斷瀏覽器是否是ie

ie:cancelbubble

firefox:stoppropagation

*/function

stoppropagation(e)

else

}

jquery中提供了stoppropagation()方法來停止事件冒泡,當需要時,只需用用event物件來呼叫就行,即event.stoppropagation();

什麼是預設行為網頁元素,都有自己的預設行為,例如,單擊超連結會跳轉...

阻止預設行為dom中提供preventdefault()方法來取消事件預設行為,但是只有當cancelable屬性設定為true的事件,才可以使用preventdefault()來取消事件預設行為,使用event物件在事件函式中呼叫就行

ie中提供的是returnvalue屬性,預設為true,當它設定為false時,就是取消事件預設行為,也是用event物件在事件函式中呼叫

/*

封裝阻止元素的預設行為函式

ie:returnvalue

dom:preventdefault

*/function

preventdefaultaction(event)

else

}

jquery中提供了preventdefault()方法來阻止元素的預設行為,只需要用event物件來呼叫就好,即event.preventdefault()

如果想同時對事件物件停止冒泡和預設行為,可以在事件處理函式中返回false。這是對事件物件同時呼叫stoppropagation()方法和preventdefault()方法的一種簡寫方式

阻止事件冒泡行為與事件預設行為

js 不支援相容性 阻止事件冒泡行為 什麼是冒泡事件?如 在乙個按鈕是繫結乙個 click 事件,那麼 click 事件會依次在它的父級元素中被觸發 stoppropagation就是阻止目標元素的事件冒泡到父級元素。function stopbubble e 阻止事件預設行 作用是取消乙個目標元素...

阻止事件冒泡和預設行為

在乙個物件上觸發某類事件 比如單擊onclick事件 如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理 父級物件所有同類事件都將被啟用 或者它到達了物件層次的最頂層,即do...

阻止事件冒泡 和 阻止事件預設行為

1.event.stoppropagation 方法 這是阻止事件的冒泡方法,不讓事件向documen上蔓延,但是預設事件任然會執行,當你掉用這個方法的時候,如果點選乙個連線,這個連線仍然會被開啟,2.event.preventdefault 方法 這是阻止預設事件的方法,呼叫此方法是,連線不會被開...