DOM事件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_32308611/article/details/89666783

1.DOM事件的级别

事件级别 DOM标准定义的级别

DOM0 elem.onclick = function(){}

DOM1 没有事件级别的制定

DOM2 elem.addEventListener("click",function(){},false)

IE中，elem.attachEvent("onclick",function(){})

DOM3 elem.addEventListener("keyup",function(){},false)

增加了很多鼠标事件和键盘事件

2.DOM事件模型

有冒泡和捕获

3.DOM事件流

事件流是指浏览器在为当前页面与用户交互中是如何操作的，如点击了左键，这个左键是怎么传递到页面上的，是怎么响应的

一个完整的事件流包含三个阶段：事件捕获、目标阶段、事件冒泡

1.DOM事件捕获的具体流程

window---->document---->document.documentElement---->document.body---->......---->目标元素

2.DOM事件冒泡的具体流程

目标元素---->......------>document.body---->document.documentElement----->document------>window

3.Event对象的常见应用

event.preventDefault();阻止事件的默认行为

event.stopPropagation();阻止事件的冒泡

event.stopImmediatePropagation();如果给一个元素依次绑定了click事件的A,B处理函数，想执行第一个处理函数A，而不执行B，则可以使用该属性

event.currentTarget;当前所绑定事件的元素

event.target;触发当前事件的元素

4.事件代理：把子元素的事件都转移到父级元素上，绑定一次事件就可以了

在父级元素中可以使用event.target拿到触发当前事件的元素；event.currentTarget拿到父级元素

4.自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
    <style>
        html * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <section id="wrap>
        <p></p>
    </section>
    <script>
        //定义一个事件custom
        const eve = new Event("custom");
        //const eve = new CustomEvent("custom",{message:"hello custom."});
        
        const wrap = document.getElementById("wrap");

        //给wrap绑定custom自定义事件
        wrap.addEventListener("custom",function(){
                console.log("自定义事件custom...")
        },false);
        /*
            wrap.addEventListener("custom",{message},function(e){
                   console.log(message);
            })
        */
        
        //触发自定义事件
        wrap.dispatchEvent(eve);

        
    </script>
</body>
</html>