成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

JS基礎(chǔ)入門(mén)篇（二十一）—事件流

Salamander / 1712人閱讀

摘要：事件綁定方式一用綁定事件方式二用進(jìn)行事件偵聽(tīng)，也能起到綁定事件的作用。第一個(gè)參數(shù)事件名第二個(gè)參數(shù)解綁的函數(shù)名如果是匿名函數(shù)，無(wú)法解綁。一般使用有名函數(shù)傳參。

1.事件綁定

方式一：用on綁定事件

方式二：用addEventListener進(jìn)行事件偵聽(tīng)，也能起到綁定事件的作用。

addEventListener

    第一個(gè)參數(shù)：事件名
        （click、mouseover...）
        注意：事件名不加on
    第二個(gè)參數(shù)：綁定的函數(shù)
        （有名函數(shù)、匿名函數(shù)）
    第三個(gè)參數(shù)：
        是否捕獲
        默認(rèn)值：false
        
可以為一個(gè)元素的同一個(gè)事件名 綁定上多個(gè)處理函數(shù)

點(diǎn)擊查看效果以及代碼，codepen中也有console可以查看

以下是完整代碼




    
    Title
2.事件解綁

事件解綁：

 (1)通過(guò)用on綁定的事件，只需要為事件 重新賦值 即可。
 (2)通過(guò)addEventListener綁定的事件，需要用removeEventListener();來(lái)解綁。
        第一個(gè)參數(shù)：事件名
        第二個(gè)參數(shù)：解綁的函數(shù)名（如果是匿名函數(shù)，無(wú)法解綁。一般使用有名函數(shù)傳參。）
        第三個(gè)參數(shù)：是否捕獲，默認(rèn)值false。

點(diǎn)擊查看事件解綁效果！??！

以下是部分核心代碼：
3.事件流

事件流的三個(gè)階段：

    （1）捕獲階段
            從 最外層元素 開(kāi)始 向目標(biāo) 進(jìn)行查找的階段, 
                并且 同時(shí)執(zhí)行 該階段中 所有 被查找的元素 的 捕獲階段綁定的事件
    （2）處于目標(biāo)階段
            觸發(fā) 目標(biāo)元素的 對(duì)應(yīng)事件
    （3）冒泡階段
            從 目標(biāo)元素 開(kāi)始 逐漸往 外層 查找,
                并且 同時(shí)執(zhí)行 該階段中 所有 被查找的元素 的 冒泡階段綁定的事件。

戳鏈接，點(diǎn)擊div查看效果！??！

以下是全部代碼：




    
    Title

以上代碼點(diǎn)擊黃色的結(jié)果。

4.阻止冒泡 
    通過(guò) on 進(jìn)行綁定
        通過(guò) event.cancelBubble = true;阻止冒泡
    通過(guò) addEventListener進(jìn)行綁定
        通過(guò) event.stopPropagation();阻止冒泡

以上兩種其中一種，方式都可以阻止不同綁定方式的冒泡。

以下代碼可以粘貼運(yùn)行看看效果。




    
    Title
5.瀏覽器的默認(rèn)行為

瀏覽器默認(rèn)行為

    瀏覽器默認(rèn)為我們提供的功能
    比如頁(yè)面跳轉(zhuǎn)，右鍵菜單，文字拖動(dòng)，圖片拖動(dòng)

阻止默認(rèn)行為

    有兩種方式
        （1）return false;
        （2）event.preventDefault();

    
你好你好啊你好
        百度

注意事項(xiàng)：

一般盡可能使用event.preventDefault阻止默認(rèn)樣式。因?yàn)閞eturn false；方法在jQuery中，此方法不僅會(huì)阻止默認(rèn)行為，還會(huì)阻止冒泡。相當(dāng)于同時(shí)調(diào)用了preventDefault和stopPropagation方法。
6.模擬上下文菜單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52504.html

相關(guān)文章

  • JS基礎(chǔ)入門(mén)篇（二十一）—事件流

    摘要：事件綁定方式一用綁定事件方式二用進(jìn)行事件偵聽(tīng)，也能起到綁定事件的作用。第一個(gè)參數(shù)事件名第二個(gè)參數(shù)解綁的函數(shù)名如果是匿名函數(shù)，無(wú)法解綁。一般使用有名函數(shù)傳參。 1.事件綁定 方式一：用on綁定事件 #box{ width:100px; height:100px; background-color:red; } ...

    littleGrow 評(píng)論0 收藏0

  • JS基礎(chǔ)入門(mén)篇（二十一）—事件流

    摘要：事件綁定方式一用綁定事件方式二用進(jìn)行事件偵聽(tīng)，也能起到綁定事件的作用。第一個(gè)參數(shù)事件名第二個(gè)參數(shù)解綁的函數(shù)名如果是匿名函數(shù)，無(wú)法解綁。一般使用有名函數(shù)傳參。 1.事件綁定 方式一：用on綁定事件 #box{ width:100px; height:100px; background-color:red; } ...

    shevy 評(píng)論0 收藏0

  • Java學(xué)習(xí)路線(xiàn)總結(jié)，搬磚工逆襲Java架構(gòu)師（全網(wǎng)最強(qiáng)）

    摘要：哪吒社區(qū)技能樹(shù)打卡打卡貼函數(shù)式接口簡(jiǎn)介領(lǐng)域優(yōu)質(zhì)創(chuàng)作者哪吒公眾號(hào)作者架構(gòu)師奮斗者掃描主頁(yè)左側(cè)二維碼，加入群聊，一起學(xué)習(xí)一起進(jìn)步歡迎點(diǎn)贊收藏留言前情提要無(wú)意間聽(tīng)到領(lǐng)導(dǎo)們的談話(huà)，現(xiàn)在公司的現(xiàn)狀是碼農(nóng)太多，但能獨(dú)立帶隊(duì)的人太少，簡(jiǎn)而言之，不缺干 ? 哪吒社區(qū)Java技能樹(shù)打卡?【打卡貼 day2...

    Scorpion 評(píng)論0 收藏0

  • [系統(tǒng)安全] 三十五.Procmon工具基本用法及文件進(jìn)程、注冊(cè)表查看

    摘要：本文將分享軟件基本用法及文件進(jìn)程注冊(cè)表查看，這是一款微軟推薦的系統(tǒng)監(jiān)視工具，功能非常強(qiáng)大可用來(lái)檢測(cè)惡意軟件?？梢詭椭褂谜邔?duì)系統(tǒng)中的任何文件注冊(cè)表操作進(jìn)行監(jiān)視和記錄，通過(guò)注冊(cè)表和文件讀寫(xiě)的變化，有效幫助診斷系統(tǒng)故障或發(fā)現(xiàn)惡意軟件病毒及木馬。 ...

    kk_miles 評(píng)論0 收藏0

  • JS基礎(chǔ)入門(mén)篇（二十）—事件和事件對(duì)象（一）

    摘要：事件事件的定義所有的元素都有事件，我們要做的就是為事件綁定函數(shù)，當(dāng)元素發(fā)生事件時(shí)就會(huì)出發(fā)對(duì)應(yīng)的函數(shù)。當(dāng)我們沒(méi)有為事件綁定函數(shù)時(shí)，事件的值為。點(diǎn)擊事件需要注意的是事件名是，不是。鼠標(biāo)移動(dòng)事件鼠標(biāo)移動(dòng)持續(xù)觸發(fā)，當(dāng)鼠標(biāo)移出此元素上停止觸發(fā)。 1.事件 事件的定義：所有的元素都有事件，我們要做的就是為事件綁定函數(shù)，當(dāng)元素發(fā)生事件時(shí)就會(huì)出發(fā)對(duì)應(yīng)的函數(shù)。當(dāng)我們沒(méi)有為事件綁定函數(shù)時(shí)，事件的值為nul...

    entner 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<