javascript事件冒泡实例分析

 更新时间:2015年05月13日 14:40:57   作者:永远爱好写程序  
这篇文章主要介绍了javascript事件冒泡实原理,实例分析了事件冒泡的定义及实现技巧,需要的朋友可以参考下

本文实例讲述了javascript事件冒泡。分享给大家供大家参考。具体分析如下:

事件冒泡:
 
如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发,

触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p,

在p,td,tr,table中添加事件响应

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件冒泡</title>
</head>
<body onclick="alert('body click');">
  <table onclick="alert('table click');">
    <tr onclick="alert('tr click');">
      <td onclick="alert('td click');">
        <input type="button" value="单击我" 
        onclick="alert('button click');" />
      </td>
    </tr>
  </table>
</body>
</html>

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

相关文章

  • Javascript实现Array和String互转换的方法

    Javascript实现Array和String互转换的方法

    这篇文章主要介绍了Javascript实现Array和String互转换的方法,涉及JavaScript中toString方法与split方法的使用技巧,需要的朋友可以参考下
    2015-12-12
  • JavaScript实现数组全排列、去重及求最大值算法示例

    JavaScript实现数组全排列、去重及求最大值算法示例

    这篇文章主要介绍了JavaScript实现数组全排列、去重及求最大值算法,结合实例形式分析了JavaScript针对数组的递归、遍历、排序等相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • JavaScript实现多栏目切换效果

    JavaScript实现多栏目切换效果

    在网站开发中尤其是新闻类网站,经常遇到多栏目切换的设计,这种效果有很多种实现效果,现在记录一种很简单的写法
    2016-12-12
  • JavaScript高仿支付宝倒计时页面及代码实现

    JavaScript高仿支付宝倒计时页面及代码实现

    在支付宝上我们经常会见到支付宝倒计时功能,倒计时应用非常广泛,下文给大家介绍js制作支付宝倒计时功能,但是里面涉及到,倒计时,弹框,以及字体图的相关知识,感兴趣的朋友一起看看吧
    2016-10-10
  • js中new一个对象的过程

    js中new一个对象的过程

    本文主要介绍了js中new一个对象的过程。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    本篇文章主要介绍了js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 使用js实现单链解决前端队列问题的方法

    使用js实现单链解决前端队列问题的方法

    这篇文章主要介绍了使用js实现单链解决前端队列问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript深度复制(deep clone)的实现方法

    JavaScript深度复制(deep clone)的实现方法

    本文给大家介绍JavaScript深度复制(deep clone)的实现方法,涉及到js深度复制相关知识,本文介绍的非常详细,特此分享脚本之家平台供大家参考
    2016-02-02
  • eslint 的三大通用规则详解

    eslint 的三大通用规则详解

    这篇文章主要介绍了eslint 的三大通用规则详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 微信小程序点击生成朋友圈分享图(遇到的坑)

    微信小程序点击生成朋友圈分享图(遇到的坑)

    这篇文章主要介绍了微信小程序 点击生成朋友圈分享图,本文给大家分享小编在实现此功能时遇到的各种坑,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论