DOM 事件类

VioletJack 发布于2019-08-22 15:06 / 606人阅读

摘要：事件类事件类基本概念事件的级别，指定冒泡还是捕获增加了键盘鼠标等事件类型事件模型捕获从上往下冒泡当前元素往上事件流如图描述事件捕获的具体流程目标元素对象的常见应用阻止默认行为，例如链接跳转阻止冒泡行为事件响应

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元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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