當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

认识事件冒泡和事件捕获

發布時間：2023/12/18 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了认识事件冒泡和事件捕获小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一.事件冒泡就是多個元素同時響應了同一個事件，前提是這些元素都綁定了這一個事件。這只是我的定義，感覺好理解些。

稱它為冒泡，是因為事件會按照DOM元素的層次結構依次執行，就像水泡一樣不斷浮向頂端。所以稱之為事件冒泡。

這個圖便于理解,我用箭頭來代替冒泡：

二.事件捕獲與事件冒泡觸發順序相反，事件捕獲從外層元素傳到內層元素的。body—〉div—〉span。

jquery不支持事件捕獲，不是所有的瀏覽器支持事件捕獲。

三.通過demo來認識事件冒泡

@{Layout = null; }<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script><script type="text/javascript">$(function () {$("span").bind("click", function () {var text = $("#msg").html() + "<p>span元素單擊事件</p>";$("#msg").html(text);});});$(function () {$("#content").bind("click", function () {var text = $("#msg").html() + "<p>div元素單擊事件</p>";$("#msg").html(text);});});$(function () {$("body").bind("click", function () {var text = $("#msg").html() + "<p>body元素單擊事件</p>";$("#msg").html(text);});});</script><title>BubbleEvent</title> </head> <body ><div id="content">DIV元素<span>SPAN元素</span></div><div id="msg"></div> </body> </html>

依次點擊span,div,body會出現效果圖：（body的點擊事件只作用于當前內容所占區域，而不是整個網頁區域）

四.解決事件冒泡

先認識下事件對象，在上面程式中添加一個參數event，點擊span元素時，事件對象就會被創建，這個事件對象只有事件函數才能訪問，事件函數處理完后

事件對象會銷毀。

事件對象具有自己的屬性

jquery中stopPropagation()方法可以停止事件冒泡

$(function () {$("span").bind("click", function (event) {var text = $("#msg").html() + "<p>span元素單擊事件</p>";$("#msg").html(text);alert(event.type);//event類型是clickevent.stopPropagation(); //停止事件冒泡方法 });});

此時點擊span元素效果：

五.阻止默認行為

網頁中的元素都有自己的默認行為，例如點擊a標簽，會跳頁，點擊submit按鈕會提交表單等。

事件對象提供了preventDefault()方法。可以阻止默認行為。

preventDefault()和stopPropagation()都可以用return false來代替。

六.事件對象的幾個屬性

event.target　　　　　　　　 ?獲取觸發事件的元素

event.pageX/event.pageY　　獲得光標相當于頁面的x坐標和y坐標

event.which　　　　　　　　 ??獲取鼠標的左，中，右鍵；鍵盤的按鍵

event.metaKey　　　　　　　?不同的瀏覽器對鍵盤Ctrl鍵解釋不同，jquery對其進行封裝成了metaKey()方法獲取鍵盤事件中的Ctrl鍵

event.originalEvent　　　　　 ?指向原生的事件對象

注：這幾個屬性沒有實例測試。