event中的stopPropagation和preventDefault

很多初学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的时候,效果图为:
event中的stopPropagation和preventDefault_第1张图片

现在给这个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");
}




(分享完毕)







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

你可能感兴趣的:(JS)