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程序设计有所帮助。

您可能感兴趣的文章:

微信小程序url传参写变量的方法
这篇文章主要介绍了微信小程序url传参写变量的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
微信小程序如何引用外部js，外部样式，公共页面模板
这篇文章主要介绍了微信小程序引用外部js，外部样式，公共页面模板,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
微信小程序获取用户手机号码的详细步骤
最近改了一个公司项目,新增加了一个获取用户手机号功能,里面用到了关于获取用户信息和用户手机号的功能,下面这篇文章主要给大家介绍了关于微信小程序获取用户手机号码的相关资料,需要的朋友可以参考下
2022-07-07
javascript 数组排序函数sort和reverse使用介绍
reverse方法将一个Array对象中的元素位置进行反转，sort方法返回一个元素已经进行了排序的 Array 对象，下面为大家介绍下
2013-11-11
原生Javascript插件开发实践
本文主要介绍了原生Javascript插件开发的思路分析以及使用示例。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript中this的绑定你知道几种?
this对于一些有经验的JavaScript开发者来说是一种非常复杂的机制。并且很多开发者对于this的理解并不是很清晰，导致在面试的时候经常受挫。今天我们就来看一看这个this真的有那么难吗
2023-02-02
详解性能更优越的小程序图片懒加载方式
这篇文章主要介绍了详解性能更优越的小程序图片懒加载方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
详解JavaScript正则表达式之RegExp对象
这篇文章主要介绍了JavaScript正则表达式之RegExp对象，对RegExp对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下
2015-12-12
第五章之BootStrap 栅格系统
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap 栅格系统的相关资料,需要的朋友可以参考下
2016-04-04
Javascript this关键字使用分析
这是来自http://www.quirksmode.org/js/this.html这篇文章里对this的定义，直接看定义似乎什么也不知道，下面通过实例来说明各种情况下this所指代的对象以及原理。
2008-10-10