JS addEventListener(event, function, useCapture) 有关useCapture的学习

最新推荐文章于 2023-09-29 12:30:00 发布
最新推荐文章于 2023-09-29 12:30:00 发布
阅读量390 收藏
点赞数
分类专栏： # JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZHgogogoha/article/details/104812436
版权

useCapture 意为使用捕获，今天学习的时候偶然遇到。
官方文档写的非常清楚，贴上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div 
{
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>该实例演示了在添加事件监听时冒泡与捕获阶段的不同。</p>
<div id="myDiv">
	<p id="myP">点击该段落， 我是冒泡</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击该段落， 我是捕获</p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() 
{
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function()
{
    alert("你点击了 DIV 元素!");
}, false);
document.getElementById("myP2").addEventListener("click", function() 
{
    alert("你点击了 P 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() 
{
    alert("你点击了 DIV 元素!");
}, true);
</script>

</body>
</html>

非捕获:
alert("p’);
alert(‘DIV’);

捕获:
alert(‘DIV’);
alert(‘p’);

常见案例：阻止表单提交产生的气泡

在这里插入代码片`  <form id="forms">
        <div class="oneline">
            <label for="name">用户名:</label>
            <input id="name" class="sinput" name="name" type="text" required>
        </div>
        <div class="oneline">
            <label for="email">Email:</label>
            <input id="email" class="sinput" name="email" type="email" required>
        </div>
        <div class="oneline">
            <input type="submit" id="submits" value="提交">
        </div>
    </form>`

  form.addEventListener("invalid", function(event) {
            event.preventDefault();
        }, true);

        form.addEventListener("submit", function(event) {
            if (!this.checkValidity()) {
                event.preventDefault();
            }
        }, true);

如果不捕获，就会从input冒泡到form，这样就先触发了Input的默认事件，再触发form绑定的回调函数。

ZHgogogoha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript 的addEventListener()及attachEvent()区别分析
12-10
Mozilla中： addEventListener的使用方式： target.addEventListener(type, listener, useCapture); target： 文档节点、document、window 或 XMLHttpRequest。 type： 字符串，事件名称，不含“on”，比如“click”...
useCapture：true与flase的表现区别 事件的冒泡与捕获
热门推荐
szy1000的专栏
09-21 1万+
Document 今天看了一下事件绑定，写篇博客记忆一下！
addEventListener第三个参数useCapture
Wind_waving的博客
02-09 961
参考博客addEventListener()中的第三个参数 参考博客addEventListener()第三个参数useCapture (Boolean)详细解析 总结： W3C标准中event触发的顺序：先捕获再冒泡 | | / \ -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |---------
useCapture
anderberte
07-12 1088
可以设置useCapture参数，以确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 （1）如果将useCapture设置为true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 （2）如果useCapture为false，则侦听器只在目标或冒泡阶段处理事件。 （3）当然，有的情况需要在所有三个阶段都侦听事件，此时不能使用“|”符号将true和false连接。useCapture
事件委托的概念和原理
张彬彬的博客
07-04 2875
事件委托优点 减少DOM操作的，减少浏览器的重绘（repaint）和重排（reflow），从而提高性能； 减少内存空间的占用率，因为每一个函数都是一个对象，对象越多，内存占有率就越大，自然性能就越差，使用事件委托，只需要在其父元素中定义一个事件就可以。 适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress 可以方便地动态添加和...
js-addEventListener()第三个参数useCapture
acoolgiser的博客
11-02 712
js-addEventListener()第三个参数useCapture 概述: 　　第3个参数叫做useCapture，是一个boolean值，就是true or false 。如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数 html片段 < div id
Adding-Event-Handlers_lesson：学习如何使用事件处理程序和JavaScript的.addEventListener（）方法的课程
02-17
在课程“Adding-Event-Handlers_lesson”中，你将深入学习如何选择合适的事件类型、编写事件处理函数，以及如何利用`addEventListener()`处理复杂的交互逻辑。课程可能还会涵盖事件对象、事件冒泡和事件捕获的概念，...
js代码-js的addEventListener兼容性代码
07-16
element.addEventListener(eventName, eventHandler, useCapture); ``` 其中： - `element` 是需要添加事件监听器的DOM元素。 - `eventName` 是要监听的事件类型，例如 'click'、'mouseover' 等。 - `eventHandler`...
浅谈addEventListener和attachEvent的区别
09-02
在JavaScript中，处理DOM事件监听有两个主要的方法：`addEventListener` 和 `attachEvent`。这两个方法在功能上相似，但存在一些关键的区别，特别是在浏览器兼容性和事件处理方式上。 `addEventListener` 是W3C标准...
2.01 JavaScript基础事件以及Event对象（原生态）.pdf
最新发布
10-27
本文将详细介绍 JavaScript 中的基础事件和 Event 对象，包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta JavaScript 中常用的事件等。 事件的定义 -...
详解addEventListener的三个参数之useCapture
09-03
本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享，有需要的小伙伴参考下
JS 中 addEventListen 第三个参数 useCapture
weixin_46684929的博客
04-30 1032
1、官方解释 useCapture可选Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流 及 JavaScript Event order
addEventListener参数和冒泡和捕获详细使用与说明
dupha的博客
04-30 5989
addEventListener第三参数冒泡和捕获详细说明 1.addEventListener参数说明 target.addEventListener(type, listener, useCapture); 参数一: type 表示监听事件类型的字符串。 参数二: listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅事件监听回调
addEventListener的三个参数之useCapture
llnara的专栏
01-31 1271
http://www.jb51.net/article/62293.htm
JS事件的三个阶段详解
RoddyLD的博客
05-30 2382
JS事件的三个阶段详解一、JS事件的三个阶段二、冒泡阶段触发事件三、捕获阶段触发事件四、阻止冒泡行为五、阻止事件冒泡和默认行为 一、JS事件的三个阶段 事件处理机制的三个阶段：1.捕获 2.目标 3.冒泡 element.addEventListener(event, function, useCapture) useCapture:事件处理机制（捕获阶段true，目标阶段，冒泡阶段false）默认为冒泡阶段 捕获阶段：事件从外向内执行; 冒泡阶段：事件从内向外执行 当点击目标元素的时候就是这三步，唯一
Javascript事件的捕获与冒泡
qq_33390316的博客
11-14 234
首先根据定义，addEventListener() 方法用于向指定元素添加事件句柄。其中有3个参数，addEventListener(event,function,useCapture),分别为： event：字符串，指定事件名。（必须） function：指定要事件触发时执行的函数。（必须） useCapture:布尔值，指定事件是否在捕获或冒泡阶段执行。(可选） useCapture的可能值为： true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行。 也许我们平时会碰到这样一
【JS】JS的事件监听以及addEventListener的第三个参数
owo_ovo的博客
09-29 397
JS的事件监听以及addEventListener的第三个参数
addEventListener(event, function, useCapture) 简记
u011927449的博客
06-05 663
监听事件方法：addEventListener(<event-name>, <callback>, <use-capture>) 移除监听事件方法：removeEventListener(event, function) 其中 addEventListener(event, function, useCapture) 有三个参数，分别代表： 第一个参数 event-name (String)：所要监听的事件名称或类型， 　　如：鼠标事件(mousedown, mouseu
js addeventlistener 用法
07-27
addEventListener 是 JavaScript 中用于给元素添加事件监听器的方法。它的用法如下所示： ```javascript element.addEventListener(event, function, useCapture); ``` 参数解释： - `element`：要添加事件监听器的元素。 - `event`：要监听的事件类型，比如 "click"、"mouseover" 等。 - `function`：事件触发时要执行的函数，也称为事件处理程序或回调函数。 - `useCapture`：可选参数，指定事件是在捕获阶段还是冒泡阶段触发，默认为 false（冒泡阶段）。 示例代码如下所示： ```javascript const button = document.getElementById("myButton"); function handleClick() { console.log("按钮被点击了！"); } button.addEventListener("click", handleClick); ``` 上述代码中，我们获取了一个 id 为 "myButton" 的按钮元素，并定义了一个 handleClick 函数作为按钮点击事件的处理函数。然后，通过 addEventListener 方法将 handleClick 函数绑定到按钮的 "click" 事件上。 通过这种方式，当按钮被点击时，handleClick 函数会被调用，并输出一条消息到控制台上。你可以根据自己的需求修改 handleClick 函数来实现相应的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值