前端中的事件流

最新推荐文章于 2024-03-17 23:56:58 发布

星中媛

最新推荐文章于 2024-03-17 23:56:58 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45012866/article/details/110161840

版权

前端中的事件顺序

事件流：描述的是事件发生的顺序。
事件流的3个阶段，即顺序：
事件捕获阶段
处于目标阶段
事件冒泡阶段
什么是事件冒泡？
即事件从下级传递给上级。如果同时给儿子和父子定义了事件，那么在点击儿子，触发儿子的事件之后，也会再触发父亲的事件。浏览器试默认事件冒泡行为的。
如何阻止事件冒泡？
但是在开发的过程中，我们大多数情况是不需要事件冒泡的。我们想要的是点击儿子事件就只触发儿子事件，而不需要将父亲的事件触发。所以阻止上一级的事件的触发就叫做阻止事件冒泡。
什么是默认行为？
默认行为就是比如我们单击a标签的时候，会自动跳转到指定的链接中，但是我们没有监听过什么行为，这就是a标签的默认行为。这就是这些标签的默认事件。
如何阻止默认行为？

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son{
            width:50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--在点击父亲之后只触发父亲的事件，但是点击儿子的事件之后，会先触发儿子的事件，再触发父亲的事件，父亲的事件就像泡泡一样冒出来，这就叫事件冒泡-->
<div class="father" onclick="father()">
    <div class="son" onclick="son()"></div>
</div>
<script>
    function father() {
        alert("father")
    }
    function son() {
        alert("son")
    }
</script>
</body>
</html>

阻止事件冒泡

<body>
<!--在点击父亲之后只触发父亲的事件，但是点击儿子的事件之后，会先触发儿子的事件，再触发父亲的事件，父亲的事件就像泡泡一样冒出来，这就叫事件冒泡-->
<div class="father" onclick="father()">
    <div class="son" onclick="son(event)"></div>
</div>
<script>
    function father() {
        alert("father");
    }
    function son(event) {
        alert("son");
        //阻止事件冒泡  写法1
        // event.cancelBubble=true;
    //    阻止事件冒泡  写法2
        event.stopPropagation();
    }
</script>

阻止事件默认行为

<body>
<a href="http://www.baidu.com" onclick="cli(event)">百度一下</a>
<script>
    function cli(event) {
        alert("请进行注册");
    //    阻止默认行为
        event.preventDefault();
    }
</script>
</body>