五月天青色头像情侣网名,国产亚洲av片在线观看18女人,黑人巨茎大战俄罗斯美女,扒下她的小内裤打屁股

歡迎光臨散文網(wǎng) 會員登陸 & 注冊

《建議收藏》JS高級 - 事件流 事件代理

2020-06-08 14:23 作者:MagnumHou  | 我要投稿

一、事件流

事件流用來描述從頁面中接收事件的順序。

在JS中的事件流,有兩種:事件冒泡流 和 ?事件捕獲流。

1.1 事件冒泡流

也叫IE事件流,就是在嵌套的元素中,給存在嵌套關(guān)系的多個元素設(shè)置同種的事件類型,當觸發(fā)最內(nèi)層最具體的那個元素這個事件時,那么外層設(shè)置了相同事件類型的元素,會被依次執(zhí)行。所有事件處理程序默認都是事件冒泡的。

事件冒泡很明顯,會帶來一些問題,本來我們只想執(zhí)行嵌套元素中內(nèi)部的某個元素的事件,然后由于事件冒泡,外層元素的相同事件也會被觸發(fā),這樣就需要我們對其進行阻止。阻止事件冒泡的方式如下:

支持DOM2級事件處理程序的瀏覽器阻止事件冒泡的方法

IE8及以下: 對象不支持“stopPropagation”屬性或方法

ev.cancelBubble = true;

瀏覽器能力檢測:

阻止事件冒泡的兼容寫法

1.2 事件捕獲流

也叫網(wǎng)景事件流,和事件冒泡流完全相反。嵌套元素設(shè)置相同的事件類型,事件冒泡流執(zhí)行順序由 最內(nèi)部最具體的元素 向外依次擴散執(zhí)行 ;而事件捕獲流,執(zhí)行順序則是 由最外層最不具體的元素 向最內(nèi)層最具體的元素 擴散

只有支持 DOM2 級事件處理程序的瀏覽器,才支持事件捕獲流。而所有的事件處理程序,默認都是事件冒泡流。所以,不必擔心事件捕獲的問題,可以放心的使用事件冒泡流相關(guān)的操作。只有特殊的情景下,才會用到事件捕獲流。

DOM2事件處理程序,通過設(shè)置第三個參數(shù),來確認是 事件捕獲流 還是 事件冒泡流階段。

addEventListener(type,fn,boolean)

參數(shù) ?type 指定事件類型

fn 指定事件觸發(fā)的事件函數(shù)

boolean ?布爾值。默認是false, 事件冒泡階段。如果設(shè)置為true,則為事件捕獲階段。


DOM2事件處理程序演示事件冒泡
OM2事件處理程序演示事件捕獲
阻止事件捕獲:和阻止事件冒泡的方式是一樣的

1.3 事件代理

也叫事件委托。借助事件冒泡的原理,用父元素去處理子元素中具有相同的事件。這樣可以減少DOM的操作。

html代碼
JS代碼普通的操作方式
事件代理優(yōu)化

JQ中的事件委托

JQ中的事件委托

1.5 阻止默認行為

有一些元素或瀏覽器本身具有某些默認行為。

如:在瀏覽器頁面中,鼠標右鍵會出現(xiàn)操作面板;

img標簽通過src屬性去請求資源;

a標簽href屬性跳轉(zhuǎn)功能;

表單的提交事件等等。

通過事件對象查看 cancelable 屬性,如果值為 true,則可以取消默認行為,否則則不可以。

阻止默認行為

1.6 拖拽事件

圖示


HTML代碼
CSS代碼
JS部分代碼


看完點個贊,是對up主最大的支持......持續(xù)更新中....?

獲取更多前端知識,搜索微信公眾號:前端知識分享喵


《建議收藏》JS高級 - 事件流 事件代理的評論 (共 條)

分享到微博請遵守國家法律
双流县| 会昌县| 襄城县| 白城市| 丽江市| 顺义区| 嵊州市| 当阳市| 城口县| 蛟河市| 霍州市| 如东县| 铜陵市| 循化| 临湘市| 喀什市| 喀喇沁旗| 永吉县| 瑞金市| 吉木萨尔县| 桐乡市| 文水县| 老河口市| 永福县| 远安县| 绥阳县| 惠东县| 内乡县| 濮阳县| 亳州市| 信阳市| 宝清县| 广宗县| 兰西县| 霍山县| 九寨沟县| 阿克陶县| 高尔夫| 英吉沙县| 建湖县| 文安县|