这篇文章主要介绍了 javascript 事件冒泡原因、显示效果及阻止冒泡的方法, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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="zh" xml:lang="zh">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta name="developer" content="Realazy" />
- <title>
- Bubble in JavaScript DOM
- </title>
- <style type="text/CSS" media="screen">
- div * { display: block; margin: 4px; padding: 4px; border: 1px solid white;
- } textarea { width: 20em; height: 2em; }
- </style>
- <script type="text/javascript">
- //<![CDATA[
- function init() {
- var log = document.getElementsByTagName('textarea')[0];
- var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
- for (var i = 0,
- n = all.length; i < n; ++i) {
- all[i].onmouseover = function(e) {
- this.style.border = '1px solid red';
- log.value = '鼠标现在进入的是: ' + this.nodeName;
- };
- all[i].onmouseout = function(e) {
- this.style.border = '1px solid white';
- };
- }
- var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
- for (var i = 0,
- n = all2.length; i < n; ++i) {
- all2[i].onmouseover = function(e) {
- this.style.border = '1px solid red';
- if (e) //停止事件冒泡
- e.stopPropagation();
- else window.event.cancelBubble = true;
- log.value = '鼠标现在进入的是: ' + this.nodeName;
- };
- all2[i].onmouseout = function(e) {
- this.style.border = '1px solid white';
- };
- }
- }
- window.onload = init;
- //]]>
- </script>
- </head>
- <body>
- <h1>
- Bubble in JavaScript DOM
- </h1>
- <p>
- DOM树的结构是:
- </p>
- <pre>
- <code>
- UL - LI - A - SPAN
- </code>
- </pre>
- <div>
- <ul>
- <li>
- <a href="http://www.phperz.com/#">
- <span>
- Bubbllllllllllllllle
- </span>
- </a>
- </li>
- <li>
- <a href="http://www.phperz.com/#">
- <span>
- Bubbllllllllllllllle
- </span>
- </a>
- </li>
- </ul>
- </div>
- <textarea>
- </textarea>
- <p>
- 鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(
- <code>
- mouseover
- </code>
- )事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。
- </p>
- <div>
- <ul>
- <li>
- <a href="http://www.phperz.com/#">
- <span>
- Bubbllllllllllllllle
- </span>
- </a>
- </li>
- <li>
- <a href="http://www.phperz.com/#">
- <span>
- Bubbllllllllllllllle
- </span>
- </a>
- </li>
- </ul>
- </div>
- <p>
- 如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。
- </p>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0306/264722.html