五月天青色头像情侣网名,国产亚洲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高級 - 事件流 事件代理的評論 (共 條)

分享到微博請遵守國家法律
景德镇市| 蕉岭县| 万安县| 云阳县| 蒲城县| 金沙县| 汉沽区| 堆龙德庆县| 蓬安县| 桃园市| 白玉县| 凤庆县| 南陵县| 上饶县| 吉木萨尔县| 阳新县| 达孜县| 恭城| 瑞安市| 黎城县| 东阿县| 台南市| 太谷县| 白朗县| 吉木乃县| 德兴市| 仁怀市| 天津市| 花垣县| 方山县| 榆中县| 申扎县| 八宿县| 广南县| 垣曲县| 上杭县| 汝阳县| 洞头县| 出国| 荔波县| 万载县|