DOM 事宜类

2024年5月22日 168次阅读 来源: spoiler

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：

    事宜流->目的阶段: 捕捉
    目的阶段-->事宜流: 冒泡

实例：

<!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

  • 能够拷贝、转发，然则必需供应原作者信息，同时也不能将本项目用于商业用途。
    原文作者：spoiler
    原文地址: https://segmentfault.com/a/1190000013536765
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞