JavaScript-event事件

最新推荐文章于 2023-06-10 17:28:29 发布

Aurora·

最新推荐文章于 2023-06-10 17:28:29 发布

阅读量93

点赞数

文章标签： js bom event

本文链接：https://blog.csdn.net/weixin_44040583/article/details/103463886

版权

event事件
event：实际上就是一个事件，是浏览器自动触发或者用户手动触发的页面状态的改变。
事件处理函数：当事件发生时自动调用的函数。在事件发生之前绑定到时间属性上。

绑定事件的三种方式：

<div class="div"></div>

// 1. 句柄	写在html元素中，以属性的形式存在
<div class="div" οnclick="alert('hello world')">click me</div>

// 2.DOM0级绑定	domElem.on + 事件 =  处理函数
document.getElementById("div").onclick = fun;
function fun() {
   alert("hello world");
}

//3.DOM2级绑定  事件监听器  domElem = addEventListener("事件名", "处理函数")
function fun() {
    alert("hello world");
}
document.getElementById("div").addEventListener("click", fun);

事件模型
在DOM中一个事件的发生有三个阶段：
1.捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
2.目标触发：首先触发目标元素上的事件处理函数。
3.冒泡：会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event</title>
    <style>
        .d1 {
            width: 150px;
            height: 150px;
            background-color: skyblue;
            position: relative;
        }
        
        .d2 {
            width: 100px;
            height: 100px;
            background-color: tomato;
            position: absolute;
            top: 25px;
            left: 25px;
        }
        
        .d3 {
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            top: 25px;
            left: 25px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <div class="d3">
            </div>
        </div>
    </div>
    <script>
        var d1 = document.getElementsByClassName("d1")[0];
        var d2 = document.getElementsByClassName("d2")[0];
        var d3 = document.getElementsByClassName("d3")[0];
        d1.addEventListener("click", fun)
        d2.addEventListener("click", fun)
        d3.addEventListener("click", fun)

        function fun(e) {
            console.log(this.className);
        }
    </script>
</body>
</html>

当点击中间的div时，输出结果如下：
在这里插入图片描述

addEventListener的第三个参数：capture
是否在捕获阶段提前触发，默认是false，控制事件触发的顺序。

将第三个参数改为true时，就是事件捕获，d1的事件会提前触发

d1.addEventListener("click", fun, true)

输出结果就会发生改变
在这里插入图片描述
取消冒泡
W3C标准 event.stopPropagation();但不支持IE9以下版本
IE独有 event.cancelBubble = true;

封装阻止冒泡的函数 stopBubble(event);

function stopBubble(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

Aurora·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-event事件

event事件：浏览器自动触发或者用户手动触发的页面状态的改变
复制链接

扫一扫