event中的stopPropagation和preventDefault

来源：互联网发布：数控折弯机编程方法编辑：程序博客网时间：2024/06/05 08:45

很多初学js的或者是很少用到阻止冒泡的或者是工作了蛮久还是对js并不是那么了解的童鞋，可能对stopPropagation和preventDefault的作用并不是那么清晰，在很多小伙伴都问了之后，决定还是把这两个小东西梳理出来。在梳理之前，我觉得我们有必要理解一下什么是冒泡。
来，先理论知识走起来！

一、DOM事件模型

一共有3个阶段：
1、捕获：从window开始，由外向内，依次记录各级元素绑定的事件处理函数。
强调：捕获阶段只到目标元素截止

2、目标触发：默认实际触发事件的元素上的处理函数先执行。
目标元素：实际触发事件的元素

3、冒泡：按照捕获阶段反向的顺序，从目标元素的上一级开始，依次执行各级父元素上的事件处理函数

注意：IE8的事件模型只有2个阶段：目标触发和冒泡。

二、什么是事件的默认行为

在我的理解内（若有理解不对的地方，欢迎交流，共同进步！），事件的默认行为就是没有用 js 定义过但是可以执行的原本就已经定义好的行为，例如点击 a 标签会跳转，点击 type=”text” 的 input 可以输入等等，这些都没有用 js 去定义过什么点击事件或者获取焦点事件或者其他什么事件，但依然可以实现点击跳转等这些行为，而这些就是事件的默认行为。

三、stopPropagation

取消冒泡：执行完当前元素的事件处理函数后，阻止冒泡向上执行

四、preventDefault

取消默认行为：阻止后续默认行为，在函数内放前放后，对当前函数无影响

对基本的理论有大致概念之后，那么我们现在通过一个栗子来了解它们带来的效果。

五、栗子分析

css部分：<style>    a{        display: inline-block;        width: 200px;        height: 100px;        background-color: #953b39;    }     span{        display: inline-block;        background-color: #abbbbb;        margin: 35px 70px;        width: 60px;        height: 30px;        font-size: 20px;    }</style>html部分：<body>    <a href="http://blog.csdn.net"><span>看这里</span></a></body>

这是未加js的时候，效果图为：
这里写图片描述

现在给这个a元素和span元素分别添加点击事件：

var a = document.getElementsByTagName("a")[0];var span = document.getElementsByTagName("span")[0];a.onclick = function (e) {    alert("click a");};span.onclick = function (e) {    alert("click span");}

此时点击span效果依次为：
“click span”->“click a”->跳转页面到http://blog.csdn.net

1、如果我们想要点击span，不触发a的点击事件，也就是想要的最终效果依次为：

“click span”->跳转页面到http://blog.csdn.net

那么，我们可以在span的点击事件中加上e.stopPropagation()，阻止点击事件冒泡到a上，代码如下：

span.onclick = function (e) {    e.stopPropagation();    alert("click span");}

通俗点说，如果想要点击span不触发它父元素（所有父元素）上面的点击事件，可以加上e.stopPropagation()。

2、如果我们想要点击span，不让页面跳转，也就是想要的最终效果依次为：

“click span”->“click a”

那么，我们可以在span的点击事件中加上preventDefault，代码为：

span.onclick = function (e) {    e.preventDefault();    alert("click span");}

也就是阻止了事件的默认行为。

3、如果想要点击span，只触发span的点击事件，也就是想要的最终效果为：

“click span”

那么，就可以把stopPropagation和preventDefault都加上，代码为：

span.onclick = function (e) {    e.stopPropagation();    e.preventDefault();    alert("click span");}

（分享完毕）

最后
我的心愿是
希望程序员不再头顶秃地，而是头顶茂密！

阅读全文

0 0