美文网首页
事件冒泡

事件冒泡

作者: 温梦丽 | 来源:发表于2017-11-20 19:42 被阅读0次

照着书上的示例敲了一下:

一.什么是事件冒泡:

//html代码:
<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>
</body>
css代码:
#content{
    width:200px;
    height: 150px;
    border: solid #ccc 1px;
}
span{
    width: 150px;
    margin: 0 auto;
    display: block;
    background: #e28c92;
}
#msg{
    background:#e28c92;
    width:200px;

}
//jQuery代码:
$(function(){
    $("span").bind("click",function(){
        var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
        $("#msg").html(txt);
    });
    $("#content").bind("click",function(){
        var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
        $("#msg").html(txt);
    });
    $("body").bind("click",function(){
        var txt=$("#msg").html()+"<p>body元素被单击</p>";
        $("#msg").html(txt);
    });
})

在chrome浏览器下测试结果:(单击了span元素)


image.png

也就是在单击了span元素的同时,也单击了包含span元素的div元素及包含div元素的body元素,并且每个元素都会按照特定的顺序响应click事件。
元素的click事件会按照以下顺序“冒泡”。
1.span
2.div
3.body
之所以称为冒泡是因为事件会按照dom的层次结构向水泡一样不断向上直至顶端。

二.事件对象

在程序中使用事件对象特别简单,只要为函数添加一个参数(event)。

$("element").bind("click",funtion(event){
.....
})

当单击“element”元素时,事件对象就被创建了,这个事件对象只有事件处理函数才能访问到,事件处理函数执行完毕后,事件对象就被销毁了。

三.阻止事件冒泡

1.停止事件冒泡

可以阻止事件中其他对象的时间处理函数被执行。在jQuery中提供stopPropagation()方法来停止事件冒泡。
修改后的jQuery代码如下:

$(function(){
    $("span").bind("click",function(event){
        var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
        $("#msg").html(txt);
        event.stopPropagation();
    });
    $("#content").bind("click",function(event){
        var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
        $("#msg").html(txt);
        event.stopPropagation();
    });
    $("body").bind("click",function(){
        var txt=$("#msg").html()+"<p>body元素被单击</p>";
        $("#msg").html(txt);
    });
})

在chrome浏览器下测试结果:(单击了span元素)


image.png
2.阻止默认行为

网页中有些元素有一些默认的行为,比如单击提交按钮后表单会提交,有时候需要阻止元素的默认行为。

jQuery中提供了preventDefault()方法来阻止元素的默认行为。

html:
<form action="listshow.html">
  <label>用户名:</label>  <input type="text" id="username"/><br>
    <input type="submit" value="提交" id="sub" />
</form>
<div id="warn"></div>
jquery:
$("#sub").bind("click",function(event){
   var username=$("#username");
    if(username.val()==""){
        $("#warn").html("<p>文本框的值不能为空</p>");
        event.preventDefault();
    }
});

在chrome浏览器下测试结果:(在没有输入的情况下单击了提交按钮)


image.png

如果想同时对事件对象停止冒泡和默认行为,可以在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的简写方式。

1.event.preventDefault();//阻止默认行为
改写成:
return false;
2.event.stopPrapagation();//停止事件冒泡
改写成:
return false;

事件捕获✘✘

事件捕获和事件冒泡是刚好向反的两个过程。事件捕获是从最顶端开始往下开始触发。并非所有主流浏览器都支持事件捕获,jQuery不支持事件捕获,如果需要使用事件捕获,直接使用原生的javascript实现。

相关文章

  • 微信小程序中bind和catch的区别

    bindtap 冒泡事件,事件绑定不会阻止冒泡事件向上冒泡catchtap 非冒泡事件, 事件绑定阻止冒泡事件...

  • 事件绑定 和 方法传值

    冒泡和非冒泡事件绑定 bindtap: 冒泡事件绑定 catchtap: 非冒泡事件绑定当其他的事件冒泡到当前元素...

  • wepy基础知识

    1、bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。https://deve...

  • 微信小程序 WXML事件 WXML冒泡事件列表

    WXML事件分为 冒泡事件 和 非冒泡事件。 冒泡事件:当一个事件被触发后,该事件会向父节点传递。 非冒泡事件:不...

  • 小程序冒泡事件

    冒泡事件列表 解决冒泡事件

  • 什么是事件冒泡/捕获?

    事件冒泡:子元素事件的触发会影响父元素事件开关事件冒泡:A:开启事件冒泡:element.addEventList...

  • 小程序中点击子元素事件而不触发父元素的点击事件

    原理:bind事件绑定不会阻止冒泡事件向上冒泡catch事件绑定可以阻止冒泡事件向上冒泡 当点击子元素的catch...

  • vue中的事件

    单击事件:@click=" " 事件对象:@click="show($event)" 事件冒泡: 阻止冒泡事件:@...

  • JavaScript中的冒泡事件

    事件冒泡机制 事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制。在事件冒泡中...

  • 阻止事件冒泡

    什么是事件冒泡? 要知道怎么阻止事件冒泡,首先我们来看一下什么是事件冒泡。 事件冒泡即在一个对象上触发某类事件(比...

网友评论

      本文标题:事件冒泡

      本文链接:https://www.haomeiwen.com/subject/mjpvvxtx.html