js冒泡事件的作用与用途,js冒泡事件例子

最新推荐文章于 2022-11-14 16:16:47 发布
最新推荐文章于 2022-11-14 16:16:47 发布
阅读量3.5k 收藏
点赞数 1
文章标签： function xhtml 浏览器 ie html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ckstory/article/details/7860239
版权 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>恺哥的例子</title>
</head>
<body>

<div id="body">
	 <ul>
		<li><a href="">home</a></li>
		<li><a href="">About</a></li>
	</ul>
</div>
</body>
</html>

function stopBubble(e){
	if(e && e.stopPropagation){//如果不是IE浏览器
		e.stopPropagation();	
	}else{//是IE浏览器
		window.event.cancelBubble=true;	
	}
}
var all = document.getElementsByTagName("*");
for(var i =0;i<all.length;i++){
	all[i].onmouseover = function(e){//鼠标悬停在元素上
		this.style.border="1px solid red";			
		stopBubble(e);
	};
	all[i].οnmοuseοut=function(e){//鼠标离开
		this.style.border="0px";
		stopBubble(e);//组织冒泡
	};
}

上面是一个简单的例子,当鼠标悬停在元素之上,我们为这个元素加上红色边框,如果离开了再去掉这个红色边框,

如果不加 这个 阻止冒泡的方法,每次都会给父类增加红丝边框,大家 可以试验一下.一试便知!



ckstory
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
10-26
此外，为了更好地理解和使用JavaScript事件，你可以参考这个在线查询工具：[javascript事件与功能说明大全](http://tools.jb51.net/table/javascript_event)，它汇总了JS常用的事件类型和函数功能，对开发者来说是个...
js基础之事件捕获与冒泡原理
12-13
想要了解什么是事件捕获与冒泡，需要先了解什么是事件。 什么是事件？ 我们知道，在前端开发中，JavaScript负责定义网页的“行为”。这里所说的“定义”，其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
webApi08
tooHar的博客
05-06 89
笔记目录小概1.阻止a标签默认跳转2. addEventListener2.2 事件移除3. 事件冒泡3.1 事件冒泡介绍3.2 事件冒泡的好处3.3 事件冒泡的影响3.4 事件捕获4. 事件三个阶段5. 事件类型6. 键盘事件7. DOM综合案例总结 小概 本章的学习内容 ：阻止a标签默认跳转，addEventListener方法（removeEventListener方法），事件冒泡详解，事件捕获，事件类型，键盘事件及获取按键，DOM案例练习 提示：以下是本篇文章正文内容，下面案例可供参考 1.阻止
JavaScript事件冒泡简介及应用
weixin_30709635的博客
08-23 396
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 打个比方说：你在地方法院...
js事件冒泡详解和使用场景
Youyzq的博客
11-14 2309
事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件。
js冒泡事件的作用效果
OnlyLove_KD的博客
04-22 1199
js冒泡事件的实际效果
javascript冒泡事件的意义及如何阻止冒泡事件
u012169411的专栏
11-18 3897
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JS冒泡事件的快速解决方法
10-26
JavaScript中的冒泡事件是事件处理中的一个关键概念，它源于事件在DOM（文档对象模型）层级中的传播方式。当一个事件（如鼠标点击）在某个元素上触发时，该事件不仅会在该元素上执行，还会逐级向上层元素传播，直到...
什么是事件冒泡和事件捕获、事件委托，他们的作用
weixin_46449470的博客
07-25 1748
事件模型 JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。 一.原始事件模型（DOM0级） 这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件： （1）在html代码中直接指定属性值： （2）在js代码中为　document.getElementsById(“demo”).onclick =
JS事件冒泡实例
u010025127的博客
06-25 692
近段时间，在开发中遇到需要自定义选择下拉框，在自己尝试实现下拉选择框时，就遇到今天要探讨的js冒泡问题。于是，针对这个问题，本文结合选择下拉框的实现为例，来探讨一下。 首先看一下什么是事件冒泡 事件冒泡 ：dom树中的一个元素接收到事件的时候，会将事件传递给他的父级元素，直至window。先来看一下简单的例子： <div id="div1"> 父节点 <div id="div2"> ...
js事件冒泡
litong149的博客
09-09 1万+
DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。 当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们...
JS 事件及冒泡的应用(二)
苏小锅的博客
05-27 346
一、事件绑定及解绑 onclick（）触发事件 var btn = document.querySelector('button'); btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; docu...
js冒泡机制
0bug0warning的博客
10-14 2630
                                       js冒泡机制 冒泡：顾名思义，从最下面的位置某个元素开始往上面浮出。 在js中，是指从最下面的结点到具有触发条件的父节点依次触发。 什么时候会用到冒泡机制呢？ 一般冒泡机制会用于addElementListener监听器中。 下面来看代码。 &lt;html&gt; &lt;head&gt; &lt...
事件冒泡原理自我理解以及使用
L_YNAN的博客
06-24 1万+
首先，这是我自己在学习过程中对于时间冒泡原理的理解，如果有不对的地方，读者尽可提出，不断学习。 1.事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。 2.比如： document.
JS 什么是 冒泡 和 捕获 capture pop
02-20 2254
冒泡 和 捕获 看网上说的也不是太明白，我给重新整理下。 参阅：https://www.cnblogs.com/alvinwei1024/p/4739344.html 冒泡和捕获是指在元素上的事件被触发的时候，js 传递事件的两种方向，或者说过程。 前言： 如，有这么一个页面 和 js 方法 &amp;amp;amp;lt;div id=&amp;amp;quot;lv1&amp;amp;quot; class=&amp;amp;quot;level&amp;a
js实现冒泡排序
热门推荐
不想起床
06-27 7万+
冒泡排序原理： 冒泡排序算法的原理如下： 比较相邻的元素。如果第一个比第二个大，就交换他们两个。 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比比较 白话就是：比如有6个数，你需要比较5趟，这......
js 事件冒泡和事件委托
最新发布
08-27
事件冒泡是指当一个元素上的事件被触发时，该事件会从最内层的元素开始向父级元素逐级触发，直到触发到最外层的元素为止。事件冒泡可以通过使用 `event.stopPropagation()` 方法来停止继续向上冒泡。 事件委托则是利用事件冒泡的特性，将事件处理程序绑定在父级元素上，通过判断事件源来执行相应的操作。这种方式可以减少事件处理程序的数量，优化性能，特别适用于动态添加或删除子元素的情况。 举个例子来说，假设有一个父级元素 ul，里面包含多个子元素 li，我们希望点击每个 li 元素时能执行相应的操作。传统的方式是给每个 li 元素都绑定点击事件，但是如果 li 元素很多的话会导致事件处理程序过多。而使用事件委托的方式，我们只需要给 ul 元素绑定一个点击事件，并通过判断事件源是哪个 li 元素来执行对应的操作。 ```javascript // 传统方式 const lis = document.querySelectorAll('li'); lis.forEach(li => { li.addEventListener('click', function() { // 执行操作 }); }); // 事件委托 const ul = document.querySelector('ul'); ul.addEventListener('click', function(event) { const target = event.target; if (target.tagName === 'LI') { // 执行操作 } }); ``` 通过事件委托，我们只需要绑定一个事件处理程序，即使动态添加或删除了 li 元素，也不需要重新绑定事件处理程序，从而提高了性能和代码的可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值