DOM 事件类

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：

    事件流->目标阶段: 捕获
    目标阶段-->事件流: 冒泡

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Event</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="ev">
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: red;
                color: #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
        目标元素
    </div>
    <script type="text/javascript">
        var ev = document.getElementById("ev");
        window.addEventListener("click", function () {
            console.log("window capture"); //捕获
        }, true);

        document.addEventListener("click", function () {
            console.log("document capture");
        }, true);
        //html标签
        document.documentElement.addEventListener("click", function () {
            console.log("html capture");
        }, true);
        document.body.addEventListener("click", function () {
            console.log("body capture");
        }, true);
        ev.addEventListener("click", function () {
            console.log("ev capture");
        }, true)

        //自定义
        var eve = new Event('test');
        ev.addEventListener("test", function () {
            console.log("test dispatch");
        })
        setTimeout(function () {
            ev.dispatchEvent(eve);
        }, 3000);
    </script>
</body>

</html>

License

可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。

DOM 事件类

spoiler

引用和评论

Vue 重置组件到初始状态

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合