JQuer事件冒泡详解

最新推荐文章于 2022-03-14 22:13:59 发布

谢小柒

最新推荐文章于 2022-03-14 22:13:59 发布

阅读量528

点赞数

分类专栏：工作学习笔记文章标签： java 事件冒泡

本文链接：https://blog.csdn.net/xyq286654901/article/details/79625642

版权

工作学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

前言：记录自己在工作中遇到的小问题，积少成多！因为是新手，有什么写的不好的地方还希望大家指出来。有什么更好的方法还希望大家提出来，一起交流学习！（小弟先在这里谢谢大家）

正文：

一、时间冒泡

默认情况下，事件使用事件冒泡流。当事件（例如单击事件）在某一DOM事件上被触发时，事件将沿着该节点的各个父节点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直通过DOM直至到达文档根部。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>事件冒泡</title>
  <script src="../../js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
    $(function () {
      //为span元素绑定click事件
      $('span').bind('click', function () {
        var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
        $('#msg').html(txt);
         
      });
      //为div 元素绑定click事件
      $('#content').bind('click', function () {
        var txt = $('#msg').html() + '<p>外层div元素被点击</p>';
        $('#msg').html(txt);
      });
      //为body元素绑定click事件
      $('body').bind('click', function () {
        var txt = $('#msg').html() + '<p>body元素被点击</p>';
        $('#msg').html(txt);
      });
    });
     
  </script>
</head>
<body id="body">
  <div id="content">
    外层div元素
    <span>内层span元素</span>
  </div>
  <div id="msg"></div>
</body>
</html>

当点击内层span元素时，即触发<span>元素的click事件，会输出3条记录。

即：

内层span元素被点击

外出div元素被点击

body元素被点击

这就是事件冒泡引起的

二、事件冒泡引发的问题

1、事件对象

在程序中使用事件对象，只需要为函数添加一个参数，Jquery代码如下

$('element').bind('click',function(event){ //event:事件对象
 
});

2、停止事件冒泡

在Jqyery里面提供了stopPropagation()方法来阻止事件冒泡

以span元素绑定click事件为例：

//为span元素绑定click事件
      $('span').bind('click', function (event) { //event:事件对象
        var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
        $('#msg').html(txt);
        event.stopPropagation(); //停止事件冒泡
      });

当点击内层span元素时，即触发span元素的click事件，这个时候只会输出一条语句

即：

内层span元素被点击

这样就解决了事件冒泡

3、阻止默认行为

网页中的元素有自己默认的行为，例如：单击超链接以后会跳转，单击“提交”表单会提交。

在Jquery里提供了preventDefault()方法来阻止默认事件。

以输入提交为例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="../../js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#sub').bind('click', function (event) {
        var username = $('#username').val(); //获取元素的值
        if (username == "") {  //判断是否为空
          alert('文本框的值不能为空'); //提示信息
          event.preventDefault(); //阻止默认行为（表单提交）
        }
      });
    });
  </script>
</head>
<body>
  <form action="/">
    用户名:<input type="text" id="username" />
    <input type="submit" value="提交" id="sub" />
  </form>  
</body>
</html>

如果不输入内容，这样就可以阻止默认行为。

总结：

如果同时对事件停止冒泡和阻止默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写。

例如上面的例子就可以把

event.preventDefault(); //阻止默认行为（表单提交）

改写为：return false;

也可以把事件冒泡中的event.stopPropagation(); //停止事件冒泡

改写为：return false;

4、事件捕获

5、事件对象的属性

谢小柒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuer事件冒泡详解

前言：记录自己在工作中遇到的小问题，积少成多！因为是新手，有什么写的不好的地方还希望大家指出来。有什么更好的方法还希望大家提出来，一起交流学习！（小弟先在这里谢谢大家）正文：一、时间冒泡默认情况下，事件使用事件冒泡流。当事件（例如单击事件）在某一DOM事件上被触发时，事件将沿着该节点的各个父节点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直...
复制链接

扫一扫