如何理解jquery事件冒泡

时间:2020-11-10 11:32:57 jQuery 我要投稿

如何理解jquery事件冒泡

  一、什么是jquery事件冒泡

  在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。

  代码实例如下:

  点击查看效果

  在以上代码中,我们可能只想点击锚点后弹出“我是third”,但是令人奇怪的`事情却是所有父元素定义的click事件都会被触发。这就是一个典型的事件冒泡效果。所谓的冒泡事件就是,如果在某一个对象上触发某一类事件(如上例的click事件),那么此事件会向对象的父级对象传播,并触发父对象上定义的同类事件。事件传播的方向是从最底层到最顶层,类似于水泡从水底浮上来一般。

  二、javascript如何阻止事件冒泡

  冒泡事件能够带来便利,有时候也会带来麻烦,下面就简单介绍一下如何阻止事件冒泡。

  代码实例如下:

  #grandfather{ border:1px solid #0066FF; cellpadding:0px; cellspacing:0px;}#grandfather td{ border: 1px solid #0066FF;}



没有阻止事件冒泡阻止了事件冒泡


  代码注释:

  1.if(window.event)这个用来兼容IE8和IE8一下浏览器。

  2. evt.stopPropagation()这个是标准浏览器。

  以上代码中,一个单元格阻止了事件冒泡,一个没有阻止事件冒泡,希望对大家的学习有所帮助。

【如何理解jquery事件冒泡】相关文章:

1.jquery键盘事件

2.剖析JQuery中的事件与动画

3.如何制造事件营销

4.怎样理解jquery中ajax的dataType属性选项值

5.深入理解javaScript中事件驱动

6.jQuery(js)如何获取文字宽度(显示长度)

7.Jquery实战

8.浅谈php冒泡的排序