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="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="https://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a> </li> <li> <a href="https://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a> </li> </ul> </div> <textarea> </textarea> <p> 鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停( <code> mouseover </code>)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。 </p> <div> <ul> <li> <a href="https://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a> </li> <li> <a href="https://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a> </li> </ul> </div> <p> 如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。 </p> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JS检索下拉列表框中被选项目的索引号(selectedIndex)
这篇文章主要介绍了JS检索下拉列表框中被选项目的索引号(selectedIndex),本文通过实例代码图文详解的形式给大家介绍的非常详细,需要的朋友可以参考下2019-12-12IE event.srcElement和FF event.target 功能比较
可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。2010-03-03两种JavaScript的AES加密方式(可与Java相互加解密)
这篇文章主要介绍了两种JavaScript的AES加密方式(可与Java相互加解密) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-08-08JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
在Ajax应用中,调用XMLHttpRequest是很常见的情况。特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成。2009-08-08JavaScript中var let const的用法有哪些区别
在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过var关键字,函数声明是通过function关键字,而在ES6之后,声明的方式有var、let、const、function、class,本文主要讨论var、let和const之间的区别2021-10-10
最新评论