深入理解addEventListener第三个参数options/useCapture

李雨非-19期-河北工职大

已于 2024-12-15 16:16:10 修改

阅读量753

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript

于 2024-12-15 14:10:30 首次发布

本文链接：https://blog.csdn.net/2301_80304567/article/details/144481049

前端专栏收录该内容

5 篇文章

订阅专栏

起因

首先，之前留给我们的一点东西，js的深入内容关键在addEventListener，这个函数中的参数，它们三个参数，分别为type、listener、options，当然在这里还有一些小的问题，比如mdn文档中它介绍到了另一个参数：useCapture，它的语法中，options与useCapture是同级的。

然后通过几篇博客来实现我对addEventListener的进一步认识，最终综合总结。

如有需要，访问https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

现在终于体会到了API文档的好处了，开始的繁琐，现在也是感受到舒服了。

useCapture—事件机制

mdn文档中的学习——一个布尔值，关系到它什么时候执行，分别是冒泡（false）和捕获（true）两个阶段。

在今天上午上课的时候，讲了一个小时的内容，绝大部分就是这三个参数，但是讲的远没有这么深，因为发现每次都是往深开个头，然后我使劲走一走，然后碰壁，最后选择放弃，因为现阶段用不到。

但是我觉得很棒的一点就是今天弄明白了整个事件机制

options的属性

首先，它的options属性中介绍到了这个参数是个指定有关listener属性的可选参数对象。

通过它的信息可以知道，它是一个关于listener属性的东西，其次它是一个可选参数对象。

capture

首先，先介绍这个东西，它也是一个可选的属性，因为本身options就是一个可选参数对象，如果不写的话，当然也可以，只不过是会默认选中一项，做了内部的封装而已

这个属性，作为一个布尔值，表示listener会在该类型的事件捕获阶段传播到该EventTarget触发。

这里就需要引到EventTarget上了，具体内容就是类似于java的顶层类或接口，然后通过实例化最顶层的对象，来给这个对象注册对应的事件处理程序

once

once作为一个可选参数对象的属性，它与capture一样，也是可选的布尔值。

而它的作用是，表示listener监听在添加后做多只调用一次，如果这个布尔值是true，监听会在调用之后移除。

但是它有点东西，就像我们可以做的一些提醒，比如当我们第一次进入某农的主页面，全都是活动的推荐，然后可以点击对应的今日不再见，这样就是实现了类似的功能。

接下来我的示例是通过视频展示浏览器开发者工具确定移除了事件监听。

once属性的true实现的监听移除

<body>
	<ul id="ul">
			<li id="1"></li>
			<li id="2"></li>
			<li id="3"></li>
			<li id="4"></li>
			<li id="5"></li>
	</ul>
	<script type="text/javascript">
		ul = document.getElementById("ul");
		ul.addEventListener('click', function(){
			alert("ul被点击了")
		}, {capture: true, once: true});
	</script>
</body>

passive

同样作为一个布尔值，它设置为true的时候，表示监听listener永远不会调用preventDefault()，如果仍然调用了的话客户端会报错。

比如可以尝试使用一个表单提交事件，监听它，并设置passive

passive浏览器对比阻止默认提交事件

<form id="form">
		  <fieldset>
		    <legend>Fruit juice size</legend>
		    <p>
		      <input type="radio" name="size" id="size_1" value="small" />
		      <label for="size_1">Small</label>
		    </p>
		    <p>
		      <input type="radio" name="size" id="size_2" value="medium" />
		      <label for="size_2">Medium</label>
		    </p>
		    <p>
		      <input type="radio" name="size" id="size_3" value="large" />
		      <label for="size_3">Large</label>
		    </p>
		  <input type="submit" value="点击提交"/>
		  </fieldset>
		</form>

		<script type="text/javascript">
			// ul = document.getElementById("ul");
			// ul.addEventListener('click', function(){
			// 	alert("ul被点击了")
			// }, {capture: true, once: true});
			form = document.getElementById("form");
			form.addEventListener('submit', function(e){
				alert("sub被点击了")
				e.preventDefault();
                // 如果要实现preventDefault表单的默认提交事件，只需要设置passive：false
                // 只需要控制布尔值，即可灵活调整是否提交
			}, {passive: true});