javascript事件冒泡简单示例
更新时间：2016年06月20日 15:43:23 作者：cherry
这篇文章主要介绍了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是如何实现的，感兴趣的朋友可以尝试操作下2013-09-09
这篇文章主要给大家介绍了利用JS如何实现文字的聚合动画效果，实现的效果非常不错，类似粒子动画的效果，有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
在 JavaScript 开发中,我们经常需要将字符串转换为数字,例如从输入框获取用户输入后进行数学计算,JavaScript 提供了多种方法来实现这一功能,如 parseInt、parseFloat、Number 等,本文将详细介绍这些方法的使用方式、适用场景以及可能的坑,需要的朋友可以参考下2025-03-03
解决canvas画布使用fillRect()时高度出现双倍效果的问题
下面小编就为大家带来一篇解决canvas画布使用fillRect()时高度出现双倍效果的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了如何利用JavaScript实现一个简单的投票demo，文中的示例代码讲解详细，对我们学习有一定参考价值，需要的可以参考一下2022-06-06
使用js获取文件的后缀，有个不错的正则，大家可以借用下，具体如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
Webpack 之 babel-loader文件预处理器详解
这篇文章主要介绍了Webpack 之 babel-loader文件预处理器详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本文主要介绍用JavaScript刷新上级页面和当前页面。附上具体实例代码。需要的朋友可以参考下2016-11-11
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
今天小编就为大家分享一篇解决Layui选择全部,换页checkbox复选框重新勾选的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
对于js中eval()函数的理解和写一个函数trim()去掉字符串左右空格;对于js中eval()函数的理解是本人心得不一定正确,感兴趣的朋友参考下，或许对你学习eval()函数有所帮助2013-02-02
最新评论