详解javascript事件冒泡
作者:lijiao 发布时间:2024-04-18 09:52:09
事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流:
一.什么是事件流:
文档对象模型(DOM)是一个树形结构,可以形象的用下图表示。
如果一个html元素触发事件,那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播,所有经过的节点都会接收到被触发的事件,这个传播过程被称之为事件流。按照事件的传播顺序,可以将其分为两类,一种是事件冒泡,一种是事件捕获,这里就涉及到本章要介绍的主题了:
1.事件冒泡:
所谓的时间冒泡就是当一个元素触发一个事件,事件会像是水泡一样,从触发元素向它的所有父节点传播,一直到根节点都会接收到此事件,如果父元素中注册了相应的事件处理函数,那么尽管事件在子节点触发的,在父元素上注册的事件处理函数同样会被触发。例如在上面图示中,如果触发a元素的onclick事件,那么它的父元素p、document和widow都会接收到此事件,并且如果在相应的父元素注册有时间处理函数,那么此事件处理函数将会执行,看一段代码实例:
<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
var table=document.getElementById("mytable");
table.onclick=function(e){
var event=e||window.event;
target=event.srcElement||event.target;
alert(target.innerHTML);
}
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
<tr>
<td>脚本之家</td>
<td>脚本之家</td>
<td>脚本之家</td>
</tr>
</table>
</body>
</html>
以上代码的目的是,当点击相应的单元格的时候就会弹出对应单元格中的内容。但是在上面的实现中并不是为每一个单元格注册onclick事件处理函数,而是将onclick事件处理函数注册于单元格的父元素table上,当点击单元格的时候会触发onclick事件,事件还会从从事件对象向上传播,而table元素恰好有注册的onclick事件处理函数,这个时候就会执行此处理函数,当然这里会设置到传递事件对象参数的问题。所有的浏览器都支持事件冒泡。二.事件捕获:
事件捕获和事件冒泡恰好相反,当点击一个元素的时候,事件传播的方向是从根元素到触发元素,IE浏览器并不支持,为了跨浏览器支持,所以默认情况下一般都是使用冒泡型事件处理模型。
2.javascript阻止事件冒泡代码
事件冒泡在某些场景非常的有用,但是有时候也是必须要阻止,下面是一段能够兼容所有主流浏览器的阻止事件冒泡的实例代码。
代码实例:
function stopBubble(e)
{
if(e&&e.stopPropagation)
{
e.stopPropagation();
}
else
{
window.event.cancelBubble=true;
}
}
以上代码可以阻止事件冒泡,下面对代码做一下简单注释:
二、代码注释:
1.function stopBubble(e) {},此函数用来阻止事件冒泡,参数是个事件对象。
2. if(e&&e.stopPropagation){e.stopPropagation();},判断是否支持stopPropagation,如果支持就使用e.stopPropagation()。stopPropagation()函数IE10和IE10以下浏览器不支持。
3.window.event.cancelBubble=true,当前IE浏览器使用这个可以阻止事件冒泡。
猜你喜欢
- CentOS 7上PHP默认是以apache或者nobody的身份运行的,这种方式下由于PHP运行需要的权限比较大,会有安全隐患,还可能会受
- 最简单的:<textarea name="A" cols="45" rows="2&
- 本文实例为大家分享了JavaScript实现动态数字时钟的具体代码,供大家参考,具体内容如下实现效果代码实现<!DOCTYPE htm
- 侧边栏在响应式设计中起到很大的作用,当屏幕小到手机的屏幕时,能够自适应屏幕大小的侧边栏固然能够为网站添加色彩,那么在Bootstrap的框架
- 浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过
- 查询速度慢的原因很多,常见如下几种:1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)2、I/O吞吐量小,形成了瓶颈效
- 简介单例模式是创建型对象的一种,用于如何优雅的创建对象。让一个类最多产生一个对象。场景只需要一个对象就能解决并且要使用多次的场景,比如框架的
- 准备软件版本Django2.1.3Python3.7.1默认使用的是sqlite3DATABASES = { 'def
- by cpglkg <script>var arr=[5,10,15];function rect(arr,width){&nb
- 内置模块(一)Python内置的模块有很多,我们也已经接触了不少相关模块,接下来咱们就来做一些汇总和介绍。内置模块有很多 & 模块中
- 初识OpenCVOpenCV是一个开源的,跨平台的计算机视觉库,它采用优化的C/C++代码编写,能够充分利用多核处理器的优势,提供了Pyth
- 目录一.定义二.命名方法2.1小驼峰命名法2.2大驼峰命名法2.3下划线命名法三.命名规则3.1标识符3.2关键字四.使用方法4.1单变量赋
- 在我们的算法中,有一种叫做线性查找。分为:顺序查找。 折
- 1.file--->settings:2.搜索temlates,点击File and Code Templates,点击右侧的Pyth
- Python内置函数isdigit()使用今天简单介绍一下Python中的isdigit()函数的用法:判断单个字符是否为数字判断字符串中是
- 本文实例介绍了如何使用ASP代码来读写注册表,呵呵厉害吧! 一个例子: <%Dim ReadComputerNam
- 如题,首先读取视频路径,其次根据视频名称创建对应的文件夹,再逐帧将视频帧读入。import cv2import argparseimport
- 一、偏好资源的积累利用DreamWeaver 4制作网页会应用到许多各种类型的要素,比如色彩、图片、模板、脚本等。利用站点资源面板将这些东东
- 在web应用中,常常会遇见点击某个链接会弹出一个新的窗口,或者是相互关联的web应用 ,这样要去操作新窗口中的元素,这时就需要主机切换到新窗
- 编写tasks.pyfrom celery import Celeryfrom tornado.httpclient import HTTP