JQuery中DOM事件冒泡实例分析_jquery

本文实例分析了JQuery中DOM事件冒泡。分享给大家供大家参考。具体分析如下：

什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素上也绑定了click事件。

  外层div元素
  内层span元素
  外层div元素

当单击内部span元素，即触发span元素的click事件时，会输出3条记录。只单击内部span元素，就会触发外部div元素和body元素上绑定的click事件。这是由事件冒泡引起的。在单击span元素的同时，也单击了包含span元素的元素div和包含div元素的元素body，并且每一个元素都会按照特定的顺序响应click事件。

元素的click事件会按照以下顺序“冒泡”。

1.
2.

3.

之所以称为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

事件冒泡引发的问题

事件冒泡可能会引起预料之外的效果。上例中，本来只想触发元素的click事件，然而

元素和元素的click事件也同时被触发了。因此，有必要对事件的作用范围进行限制。当单击元素时，只触发元素的click事件，而不触发

元素和元素的click事件：当单击

元素时，只触发

元素的click事件，而不触发元素的click事件。

事件对象

由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题，JQuery进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。

在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery代码如下：

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

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

停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在JQuery中提供了stopPropagation()方法来停止事件冒泡。

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

当单击元素时，只会触发元素上的click事件，而不会触发

元素和元素的click事件。可以用同样的方法解决

元素上的冒泡问题。

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "
外层div元素被点击.
"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});

这样，当单击元素或者

元素时，就只会输出相应的内容，而不会输出其他的内容。

阻止默认行为

网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。

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

举一个例子，在项目中，经常需要验证表单，在单击“提交”按钮时，验证表单内容，例如某元素是否是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。

用户名：

$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("
文本框的值不能为空.
"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

当用户名为空时，单击“提交”按钮，会出现提示，并且表单不能提交。只有在用户名里输入内容后，才能提交表单。可见，preventDefault()方法能阻止表单的提交行为。

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

在表单的例子中，可以把 event.preventDefault(); 改写为： return false;

也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为： return false;

事件捕获

事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。还是冒泡事件的例子，其中元素的click事件会按照以下顺序捕获。

1.

2.

3.

很显然，事件捕获是从最外层元素开始，然后再到最里层元素。因此绑定的click事件，首先会传递给

元素，然后传递给

元素，最后才传递给元素。

遗憾的是，并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript来修复。JQuery不交持事件捕获，如果读者需要使用事件捕获，请直接使用原生的JavaScript。

希望本文所述对大家的jQuery程序设计有所帮助。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• javascript怎么将值类型强制转为字符串
• javascript中什么是位运算符
• javascript怎么判断字符串是否是数字
• 总结分享： 6 种JavaScript的打断点的方...
• JQuery中DOM事件冒泡实例分析_jquery

• XML DOM
• PHP开发基础教程之PHP XML DOM
• PHP 新手入门之XML与DOM
• PHP XML DOM
• PHP XML DOM

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• javascript中什么是位运算符
• javascript怎么将值类型强制转为字符串
• javascript怎么判断字符串是否是数字
• JavaScript怎么求多个数的平均值
• 聊聊Angular中父子组件间怎么传递数据
• 总结分享： 6 种JavaScript的打断点的方式（收藏学习）
• Node项目中用images+imageinfo库给图片批量添加水印
• javascript怎么去掉小数点后两位

• JS 是什么意思
• json格式是什么？json格式文件怎么打开？
• RN布局的实例详解
• sqrt函数怎么使用
• js数组如何删除指定位置的元素？删除指定位置元素的2种方法
• 2021年前端vue面试题大汇总（附答案）
• echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）
• 如何理解vue数据双向绑定原理

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作

  

");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});