首先事件是什么?
事件是用户作出某个动作后 浏览器而给出的反应
那什么是冒泡机制呢?
什么是冒泡? 一个泡泡 他是不是会从低到高往上升,那么事件冒泡机制 就是 事件往上升:
在JavaScript中 一棵DOM树 他的事件被激活 就会往上传递信息 层层往上传递,直至传递到dom的根节点。
例如:以下代码你就会看懂了 一直往上传递信息 上面的onclck也会被激活 但你记住啊 只有onclck啊! 都是对应的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript study</title>
</head>
<body>
<div onclick="alert('a')">
<div onclick="alert('b')">
点我?先b再a
<div onclick="alert('c')">
點我?c->b->a
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
一般地,事件在传递过程中会有一些信息,这些是事件的组成部分:事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息。
那么我们怎么阻止它呢?
阻止事件冒泡
在相应的处理函数内,加入 event.stopPropagation() ,终止事件的广播分发,这样事件停留在本节点,不会再往外传播了
例如:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript study</title>
</head>
<body>
<div onclick="alert('a')">
<div onclick="alert('b')">
<div onclick="fun()"> <!--在JS代码中已经进行阻止事件冒泡了-->
點我?b->a
</div>
</div>
</div>
<script type="text/javascript">
function fun(){
alert("c");
event.stopPropagation();
}
</script>
</body>
</html>