document.addEventListener() 和 window.addEventListener() 的区别、ev.stopPropagation()的作用。

最新推荐文章于 2024-05-29 16:21:30 发布
最新推荐文章于 2024-05-29 16:21:30 发布
阅读量7.5k 收藏 11
点赞数 5
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huohua0612/article/details/89576263
版权

下面我们看一段代码：

<script>
		window.addEventListener('click',function(){
			alert("window click!");
		})
		document.addEventListener('click',function(){
			alert("document click!");
		})
</script>

输出的结果是顺序是：document click!、window click!；为什么是这样呢？

首先说一下dom的事件机制，dom事件有一下三种情况：

1.捕获阶段：从外向里依次查找元素。（“注意：查找”）

2.目标阶段：从事件源本身操作。

3.冒泡阶段：这个很形象，就是从内到外（下往上）依次触发相关的行为。（“注意：触发”）

原因：首先body被html包裹，而html被document包裹，而document被window包裹，总结上面的顺序，为：body=》html=》document=》window。所以当鼠标点击下去的时候，首先点击的是window，然后到document知道点击的页面元素，然后当传到元素的时候，这个事件就像，到了水底后，然后又把水泡冒出来显示给用户。。直到window显示结束。所以顺序是document click!=》window click!。

1、ev.stopPropagation()作用：

	<body>
        <button id="btn">ev.stopPropagation 测试</button>
	</body>
	<script>
		document.getElementById("btn").addEventListener('click',function(ev){
			alert("点击了button");
		})
		function bodyClickFun(){
			alert("点击了document");
		}
		document.addEventListener('click',function(){
			bodyClickFun();
		})
	</script>

 当点击<button>后，依次alert：点击了button、点击了document。

当我们为button事件加上：ev.stopPropagation();后，如下：

	<body>
		<button id="btn">ev.stopPropagation 测试</button>
	</body>
	<script>
		document.getElementById("btn").addEventListener('click',function(ev){
			//阻值冒泡事件
			ev.stopPropagation();
			alert("点击了button");
		})
		function bodyClickFun(){
			alert("点击了document");
		}
		document.addEventListener('click',function(){
			bodyClickFun();
		})
	</script>

 当点击<button>后，只alert：点击了button。不会再传递到document事件

参考：https://blog.csdn.net/MLGB__NIU/article/details/79107984、

          https://www.cnblogs.com/sqh17/archive/2018/02/07/8427283.html

一位也热爱前端的后端青鸟
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
window.addEventlistener和document.addEventlistener区别
weixin_44753854的博客
09-10 4636
window.addEventlistener(“click”,showa,true); 括号里三个参数： 1：“click” 事件类型，有click、onmouseover……等事件类型； 2：showa （函数名称）事件触发后调用的函数； 3：true （布尔值）用于描述事件是冒泡还是捕获，可选参数，true捕获 false冒泡。 document.addEventlistener(“cli...
【js】window.addEventListener介绍说明
热门推荐
Q仔的博客
06-29 6万+
原型 public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void 作用 　　侦听事件并处理相应的函数。[1] 参数
window.addEventListener和document.addEventListener区别
MLGB__NIU的专栏
01-19 1万+
html> lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> http-equiv="X-UA-Compa
addEventListener()使用方法
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
window.addEventListener 用法
最新发布
ivan5277的博客
05-29 1316
是JavaScript中用来为DOM元素（在本例中是浏览器窗口window）添加事件监听器的方法。这对于响应用户操作（如点击、滚动等）或页面/浏览器的特定状态变化非常有用。下面是如何使用。
document.addEventListener
weixin_61151047的博客
12-15 1万+
document.addEventListener("事件名称", 函数, false); function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序； document.addEventListener("事件名称", 函数, true): 如果为true时事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick 　 documen...
document.addEventListener使用介绍
09-04
`document.addEventListener` 是JavaScript中的一个核心方法，用于向指定元素添加事件监听器。这个方法是DOM（Document Object Model）事件处理的一部分，它允许我们在网页的文档对象上绑定各种类型的事件，如点击、...
window.addEventListener来解决让一个js事件执行多个函数
10-27
这时，`window.attachEvent`和`window.addEventListener`就显得尤为重要。 `window.onload`是JavaScript中用于处理页面完全加载后的事件，它只能附加一个函数。如果尝试多次赋值，后面的函数会覆盖前面的。这可能...
火狐浏览器不支持window.event的解决办法
05-30
火狐浏览器不支持window.event的解决办法，解决不同浏览器针对window.event的差异
前端小知识总结
weixin_45869811的博客
01-27 573
1.ES6只能新增值，无法重新赋值就会报错 2.CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值， ES6静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变。2：还有，如果自定义对象，开发者重写prototype之后，原有的constructor会丢失，因此，为了规范开发，在重写对象原型时一般都需要重新给 constructor 赋值，以保证对象实例的类型不被篡改。，用于判断一个变量是否某个对象的实例，内部机制是通过原型链来判断的。
jquery里阻止冒泡ev.stopPropagation()
antelope_2014的博客
03-24 177
$(function(){ $('#div1').click(function(){ alert($(this).attr('id')); }); $('#div2').click(function(){ alert($(this).attr('id')); }); $('#div3').click(function(ev){ alert...
js事件捕获事件冒泡
qq_37524886的博客
10-04 120
事件的三个阶段：捕获阶段、目标阶段、冒泡阶段。 事件流：从页面接受事件的顺序。 捕获阶段：事件第一阶段，从document逐级往下传递事件到目标元素的过程 目标阶段：事件第二阶段，事件流处于当前目标元素的这一段时期 冒泡阶段：事件第三阶段，从目标元素往上传递事件到目标元素的过程 <div class="btn3" style="width: 150px;height: 100px;background-color: aqua;margin: 0 auto;"> .
document.addEventListener理解
weixin_30352645的博客
11-28 282
document.addEventListener("事件名称", 函数, false); function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序； 如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick 如果为fals...
window.addEventListener()和document.addEventListener()区别
xinxin_zhu的博客
03-29 7017
window.addEventListener('load',function(){ //页面的全部资源加载完后才会执行 包括 图片 视频等 }) window.addEventListener('DOMContentLoaded',function(){ //Dom 渲染完即可执行 此时图片视频还可能没加载完 }) ...
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...
weixin_33774615的博客
11-11 1824
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，...
扫盲-----addEventlistener()方法，事件监听(一)
yangchunshang的博客
06-04 5万+
一、扫盲事件起因    时间：2018年6月1日周五下午，原本我以为我已经把当前的bug改好，应该没啥问题了，坐等下班公司聚餐（开心）突然，隔壁同组大哥，哎。。。。cp,你看看，你这个首页报了很多错哎。我的第一反应就是，不可能，怎么会有错误呢，我明明都自己测过好几次了。我一看，我去，果然。。。。首页报的错误都是在我写的组件里面出现的同一个错误。我的天。。。。。当页面缩放时，渲染页面提示,某方法不存...
window.addEventListener和div.addEventListener和document.addEventListener
09-16
window.addEventListener、div.addEventListener和document.addEventListener都是用于添加事件监听器的方法，它们之间有一些区别。 1. window.addEventListener：这个方法将事件监听器添加到整个浏览器窗口对象上。它可以用于捕获或冒泡阶段监听窗口对象上的各种事件，如点击、滚动、调整窗口大小等。 2. div.addEventListener：这个方法将事件监听器添加到指定的 `<div>` 元素上。它用于捕获或冒泡阶段监听该 `<div>` 元素上的各种事件，如点击、鼠标移动、键盘输入等。 3. document.addEventListener：这个方法将事件监听器添加到整个文档对象上。它可以用于捕获或冒泡阶段监听整个文档上的各种事件，如点击、滚动、键盘输入等。 它们的语法结构相似，都需要指定要监听的事件类型和事件处理函数。例如，以下是一个使用window.addEventListener来监听点击事件的示例： ```javascript window.addEventListener('click', function(event) { // 在这里处理点击事件 }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值