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

資訊專欄INFORMATION COLUMN

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

littleGrow / 3357人閱讀

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

1.事件綁定

方式一：用on綁定事件

方式二：用addEventListener進行事件偵聽，也能起到綁定事件的作用。

addEventListener

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

點擊查看效果以及代碼，codepen中也有console可以查看

以下是完整代碼




    
    Title
2.事件解綁

事件解綁：

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

點擊查看事件解綁效果?。?！

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

事件流的三個階段：

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

戳鏈接，點擊div查看效果?。?！

以下是全部代碼：




    
    Title

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

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

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

以下代碼可以粘貼運行看看效果。




    
    Title
5.瀏覽器的默認行為

瀏覽器默認行為

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

阻止默認行為

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

    
你好你好啊你好
        百度

注意事項：

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

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

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

相關(guān)文章

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

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

    shevy 評論0 收藏0

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

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

    Salamander 評論0 收藏0

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

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

    Scorpion 評論0 收藏0

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

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

    kk_miles 評論0 收藏0

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

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

    entner 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<