JS基礎入門篇（二十一）—事件流

shevy 發布于2019-08-22 17:59 / 1084人閱讀

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

1.事件綁定

方式一：用on綁定事件

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

addEventListener

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

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

以下是完整代碼




    
    Title

2.事件解綁

事件解綁：

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

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

以下是部分核心代碼：

3.事件流

事件流的三個階段：

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

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

以下是全部代碼：




    
    Title

以上代碼點擊黃色的結果。

4.阻止冒泡

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

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

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




    
    Title

5.瀏覽器的默認行為

瀏覽器默認行為

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

阻止默認行為

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


    你好你好啊你好
        百度

注意事項：

一般盡可能使用event.preventDefault阻止默認樣式。因為return false；方法在jQuery中，此方法不僅會阻止默認行為，還會阻止冒泡。相當于同時調用了preventDefault和stopPropagation方法。

6.模擬上下文菜單










    復制
    粘貼
    剪切
    另存

GPU云服務器云服務器二十一 js綁定事件基礎 js零基礎入門視頻入門篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95373.html

上一篇：highcharts: 如何解決「移動端將圖表旋轉90度，tooltip表現不正?！梗?/a>

JS基礎入門篇（二十一）—事件流

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

littleGrow 2019-08-29 15:40 評論0 收藏0
JS基礎入門篇（二十一）—事件流

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

Salamander 2019-08-02 10:40 評論0 收藏0
Java學習路線總結，搬磚工逆襲Java架構師（全網最強）

摘要：哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼，加入群聊，一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話，現在公司的現狀是碼農太多，但能獨立帶隊的人太少，簡而言之，不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...

Scorpion 2021-11-18 10:02 評論0 收藏0
[系統安全] 三十五.Procmon工具基本用法及文件進程、注冊表查看

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

kk_miles 2021-09-02 15:11 評論0 收藏0
JS基礎入門篇（二十）—事件和事件對象（一）

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

entner 2019-08-29 15:36 評論0 收藏0