addEventListener

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量771 收藏 1
点赞数 2
分类专栏： 前端基础知识 文章标签： addEventListener 冒泡 捕获
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Maomengdie1998/article/details/100169452
版权

addEventListener

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        
        #div2 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <p>用户点击元素div1之后，控制台会打印什么？？</p>
    <div id="div2">
        <div id="div1">div1</div>
    </div>
    <script>
        var div2 = document.getElementById('div2');
        var div1 = document.getElementById('div1');
        // true是在捕获阶段，false是在冒泡阶段，没写默认为冒泡
        // 冒泡是先内后外，捕获是先外后内
        div1.addEventListener('click', function(event) {
            console.log("1");
        }, true);
        div2.addEventListener('click', function(event) {
            console.log("2");
        });
        div1.addEventListener('click', function(event) {
            console.log("3");
        }, false);
        div2.addEventListener('click', function(event) {
            console.log("4");
        }, true);
        //4 1 3 2
    </script>
</body>

</html>
butterfly~~
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
百赢出品，必属精品
04-11 5122
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
addEventListener函数解析
程序交流中心
07-02 791
addEventListener () 方法    public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void语言版本 : Acti
JavaScript-addEventListener()
tian_tian_gong的博客
02-18 405
addEventListener() 方法用于向指定元素添加事件句柄。 正常我们为一个标签元素绑定事件可以这么写: xxx.onclick=function(){ } 但当我们有同一个事件想绑定多个函数的时候， 上面的事件函数就会只执行最后的一个，前面的被覆盖掉。 此时可以选择用addEventListener这种方法来为标签绑定事件。 注意: addEventListener() ie8及...
addEventListener 的用法示例介绍
09-04
`addEventListener` 是JavaScript中用于添加事件监听器的方法，它允许我们为同一个元素绑定多个事件处理函数，这对于构建复杂的交互式网页非常有用。在不同的浏览器环境中，`addEventListener` 的使用略有差异，尤其...
document.addEventListener使用介绍
09-04
`document.addEventListener` 是JavaScript中的一个核心方法，用于向指定元素添加事件监听器。这个方法是DOM（Document Object Model）事件处理的一部分，它允许我们在网页的文档对象上绑定各种类型的事件，如点击、...
动态的绑定事件addEventListener方法的使用
09-04
在本文中，我们将深入探讨`addEventListener`方法的使用，这对于创建响应式的Web应用至关重要。 `addEventListener`是DOM（文档对象模型）级别2事件处理程序的一部分，它允许我们为一个元素添加一个或多个事件...
addEventListener和attachEvent二者绑定的执行函数中的this不相同
09-05
在JavaScript中，`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法，但它们之间存在一些关键差异，特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分，被大多数现代浏览器支持...
HTML DOM 事件
akuibpt23191的博客
07-13 595
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
JavaScript addEventListener()事件监听方法
weixin_30300225的博客
08-06 1000
addEventListener()方法将事件处理程序附加到指定的元素。 addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。 您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。 您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。 addEvent...
addEventListener与事件捕获、事件冒泡
TTYLXWT的博客
06-16 2539
addEventListener与事件捕获、事件冒泡： addEventListener的基本用法 项目开发中，javascript和html的解耦变得至关重要，我们被推荐使用事件动 态绑定的方式来处理按钮的事件。W3C为我们提供了addEventListener()函数用来为指定的 dom元素动态绑定事件。这个函数有三个参数： type:用来设置事件类型，例如click。 listener:用来设置监听事件的函数，及type类型的事件发生后执行的函数。 大部分情况下，确切的说是我们绑定事...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 2920
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
addEventListener方法
m0_57263959的博客
08-09 1850
是一种强大的机制，可以用于在 JavaScript 中实现对 DOM 元素的事件响应，从而创建丰富的交互式用户界面。，您可以指定在特定事件发生时执行的函数，从而实现对用户交互或其他类型的事件的响应。函数会被调用，并在控制台输出 "Button clicked!示例：在 JavaScript 中使用。是 JavaScript 中用于向。DOM 元素添加事件监听器。将点击事件监听器绑定到。元素上，当按钮被点击时，
addeventlistener
06-06
`addEventListener` 是 JavaScript 中常用的事件监听方法，用于监听指定元素上的指定事件，并在事件被触发时执行指定的函数。 `addEventListener` 方法的语法如下： ```javascript element.addEventListener(event, function, useCapture); ``` 其中，`element` 表示要监听事件的 HTML 元素，`event` 表示要监听的事件名称（比如 click、mouseover 等），`function` 表示要执行的函数，`useCapture` 是一个可选参数，表示是否在捕获阶段执行函数，默认为 false。 例如，以下代码将为一个按钮元素添加一个点击事件监听器： ```html <button id="my-btn">点击我</button> <script> const myBtn = document.getElementById('my-btn'); myBtn.addEventListener('click', () => { console.log('按钮被点击了！'); }); </script> ``` 在这个示例中，我们首先使用 `getElementById` 方法获取到一个按钮元素，然后使用 `addEventListener` 方法为该按钮添加一个点击事件监听器。当用户点击该按钮时，控制台将输出一条消息“按钮被点击了！”。 需要注意的是，`addEventListener` 方法可以为同一个元素的同一个事件添加多个监听器，这些监听器将按照添加的顺序依次执行。如果需要移除事件监听器，可以使用 `removeEventListener` 方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值