DOM 事件類

VioletJack 發布于2019-08-22 15:06 / 629人閱讀

摘要：事件類事件類基本概念事件的級別，指定冒泡還是捕獲增加了鍵盤鼠標等事件類型事件模型捕獲從上往下冒泡當前元素往上事件流如圖描述事件捕獲的具體流程目標元素對象的常見應用阻止默認行為，例如鏈接跳轉阻止冒泡行為事件響應

DOM 事件類

javascript

DOM事件類

基本概念：

1. DOM事件的級別
    - DOM0 element.onclick=function(){}
    - DOM2 element.addEventListener("click",function(){}，false)
        - false or true 指定冒泡還是捕獲
    - DOM3 element.addEventListener("keyup",function(){},false)
        - 增加了鍵盤、鼠標等事件類型
2. DOM 事件模型
    - 捕獲：從上往下
    - 冒泡：當前元素往上
3. DOM 事件流「如圖1」
4. 描述DOM事件捕獲的具體流程
    - window -> document -> html -> body -> ...-> 目標元素
5. Event 對象的常見應用
    - event.preventDefault() 阻止默認行為，例如鏈接跳轉
    - event.stopPropagation() 阻止冒泡行為
    - event.stoplmmediatePropagation() 事件響應優先級，例一個按鈕綁定兩個點擊事件
    - event.currentTarget 當前被點擊的元素
    - event.target 當前綁定的事件
6. 自定義事件

    ```
    //第一種方法
    var eve = new Event("custome");
    ev.addEventListener("custome",function(){
        console.log("custome");            
    })
    
    ev.dispatchEvent(eve);
    缺點：只能指定事件名，不能添加數據
    
    //第二種方法
    CustomEvent 可以添加數據
    // 首先創建一個事件
    let myEvent = new CustomEvent("userLogin", {
        detail: {
            username: "davidwalsh"
        }
    });
    // 觸發它！
    myElement.dispatchEvent(myEvent);
    ```

圖1：

    事件流->目標階段: 捕獲
    目標階段-->事件流: 冒泡

實例：

License

可以拷貝、轉發，但是必須提供原作者信息，同時也不能將本項目用于商業用途。

云服務器 GPU云服務器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

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

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

瀏覽器內核之 HTML 解釋器和 DOM 模型

摘要：書接上文瀏覽器內核之資源加載與網絡棧本文介紹的模型之后，深入的核心部分，剖析的解釋器是如何將從網絡或者本地文件獲取的字節流轉成內部表示的結構樹。事件處理最重要就是事件捕獲和事件冒泡這兩種機制。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我...

Carbs 2019-08-02 16:04 評論0 收藏0
jQuery筆記總結篇

摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標過濾器精確選出指定下標元素獲取第個元素。原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學習的整體思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 評論0 收藏0
實現一個EventTarget類

摘要：是一個由可以接收事件的對象實現的接口，并且可以為它們創建偵聽器。方法節在上注冊特定事件類型的事件處理程序。將事件分派到此。代碼的其他方法節擴展，供實現的事件目標使用以實現屬性。級中是一般化的變動事件。 EventTarget EventTarget是一個由可以接收事件的對象實現的接口，并且可以為它們創建偵聽器。 Element，document 和 window 是最常見的事件目標，但...

Pocher 2019-08-23 15:13 評論0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業務場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業務場景。這些業務不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。背景為什么要編寫 larkplayer？（注意，這里面有...

lijy91 2019-08-02 16:05 評論0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業務場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業務場景。這些業務不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。背景為什么要編寫 larkplayer？（注意，這里面有...

linkin 2019-08-23 12:01 評論0 收藏0