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事件冒泡
事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流: 一.什么是事件流: 文档对象模型(DOM)是一个树形结构,可以形象的用下图表示. 如果一个html元素触发事件,那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播,所有经过的节点都会接收到被触发的事件,这个传播过程被称之为事件流.按照事件的传播顺序,可以将其分为两类,一种是事件冒泡,一种是事件捕获,这里就涉及到本章
-
深入理解事件冒泡(Bubble)和事件捕捉(capture)
事件的发生顺序 假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler).如果用户单击元素2,则元素1和元素2的单击事件都会被触发.但是哪一个事件先被触发?哪一个事件处理函数会被首先执行?换句话说,事件的发生顺序到底如何?如下图是当点击span元素区域是,三个点击事件都会被触发,但是先后顺序是怎样的呢? <div onclick="func1"> <p onclick="func2"> <
-
javascript事件冒泡和事件捕获详解
事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡 微软提出
-
理解jquery事件冒泡
一.什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过.下面就结合代码实例来简单介绍一下什么是事件冒泡. 代码实例如下: <html> <head> <meta charset=" gb2312"> <title>事件冒泡</title> <script type="text/javascript"
-
深入理解jQuery中的事件冒泡
1.什么是冒泡 eg: <!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="
-
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"> <h
-
javascript事件模型实例分析
本文实例讲述了javascript事件模型的用法.分享给大家供大家参考.具体分析如下: 一.事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递 二.事件对象 在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件
-
JQuery中DOM事件冒泡实例分析
本文实例分析了JQuery中DOM事件冒泡.分享给大家供大家参考.具体分析如下: 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件. <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <script type=&qu
-
jQuery阻止事件冒泡实例分析
本文实例讲述了jQuery阻止事件冒泡.分享给大家供大家参考,具体如下: 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. 阻止事
-
JavaScript事件委托实例分析
本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体如下: var addEvent = function (elem, eventType, func) { if ( elem.addEventListener ) addEvent = function (elem, eventType, func) { elem.addEventListener(eventType, func, false); }; else if ( elem.attachEvent ) addEv
-
JavaScript 事件冒泡应用实例分析
然而,在今天一些大型的WEB交互项目中,比如大型的WebGame项目,JavaScript事件冒泡影响是值得重视的.本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项. 如果你对JavaScript事件冒泡还没有什么印象,不妨先看看我之前写的一篇博客<JavaScript事件冒泡简介及应用>.本文讲究实用,不在对JavaScript事件冒泡基础知识进行过多的阐述. 在文章开始之前,现在先看看下面这样一个需求:下面HTML假设描述的是一个WebGame项目包裹栏(玩过网游的人
-
JavaScript事件冒泡与事件捕获实例分析
本文实例讲述了JavaScript事件冒泡与事件捕获.分享给大家供大家参考,具体如下: 1.事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. <body onclick="alert('body')"> <div onclick="alert('div')"> <a href="" onclick=" rel="external nofollow&qu
-
JavaScript事件冒泡机制原理实例解析
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. 听了简介介绍之后,您可能不理解,所以举个例子: <html> <head>
-
javascript事件冒泡简单示例
本文实例讲述了javascript事件冒泡的定义与用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang=&
随机推荐
- Swift UILable 设置内边距实例代码
- JavaScript中使用Callback控制流程介绍
- JavaScript操作class和style样式代码详解
- Laravel实现定时任务的示例代码
- C#实现Access通用访问类OleDbHelper完整实例
- 探讨:innodb与myisam在存储上有何特点和区别
- Ajax PHP分页演示
- javascript 双色球对奖器
- Ajax工作原理深入理解
- 以前写的两个CSS树形菜单
- java中字符串与日期的转换实例
- 一步步教大家编写酷炫的导航栏js+css实现
- jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
- 使用jQuery jqPlot插件绘制柱状图
- iOS键盘自适应弹出效果
- js使浏览器窗口最大化实现代码(适用于IE)
- Node.js 中使用 async 函数的方法
- Python判断是否json是否包含一个key的方法
- 通过Shell脚本批量创建服务器上的MySQL数据库账号
- layui动态渲染生成select的option值方法