这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要向大家介绍了 javascript 事件冒泡,以及 javascript 阻止事件冒泡的实现代码,感兴趣的朋友可以参考一下
事件是 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>
- phperz
- </td>
- <td>
- phperz
- </td>
- <td>
- phperz
- </td>
- </tr>
- <tr>
- <td>
- phperz
- </td>
- <td>
- phperz
- </td>
- <td>
- phperz
- </td>
- </tr>
- <tr>
- <td>
- phperz
- </td>
- <td>
- phperz
- </td>
- <td>
- phperz
- </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;
- }
- }
以上代码可以阻止事件冒泡,下面对代码做一下简单注释: 二、代码注释:
来源: http://www.phperz.com/article/17/0408/267642.html