[html]事件处理addEventListener详解

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量1.1k 收藏
点赞数
文章标签： html event addEventListener
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/attwice/article/details/46460941
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件处理addEventListener详解</title>
    <style>
    .div1 {
        background-color: rgba(0, 0, 0, .3);
        width: 400px;
        height: 400px;
    }
    
    .div2 {
        background-color: rgba(0, 0, 0, .4);
        width: 300px;
        height: 300px;
    }
    
    .div3 {
        background-color: rgba(0, 0, 0, .5);
        width: 200px;
        height: 200px;
    }
    </style>
    <script>
    function initapp() {
        var el1 = document.getElementById('div1');
        var el2 = document.getElementById('div2');
        var el3 = document.getElementById('div3');
        var useCapture = false;
        // 是否使用捕获：true-使用捕获,false-使用冒泡(目前普遍使用的方式)
        // 使用捕获:从根节点开始自上而下，检测每个节点是否注册了事件监听器。如果注册了并且 useCapture为true，则执行。
        // 使用冒泡：从目标节点自下而上到根节点，检测每个节点是否注册了事件监听器。如果注册了并且 useCapture为false，则执行。
        // 自上而下路径:Window->document->html->body->xxx
        // useCapture = false; 点击div3时控制台打印：DIV#div3 DIV#div2 DIV#div1 HTML#
        // useCapture = true;  点击div3时控制台打印：HTML# DIV#div1 DIV#div2 DIV#div3
        el1.addEventListener('click', myclick, useCapture);
        el2.addEventListener('click', myclick, useCapture);
        el3.addEventListener('click', myclick, useCapture);
        document.getElementsByTagName('html')[0].addEventListener('click', myclick, useCapture);
        //window.addEventListener('click', myclick, useCapture);
    }

    function myclick(event) {
        //event 触发的点击事件
        //this 当前节点
        console.log(this.tagName + "#" + this.id);
        //event.preventDefault();
        //event.stopPropagation();//阻止传播,若useCapture=false为阻止向上冒泡，否则为阻止向下传播
    }
    </script>
</head>

<body οnlοad="initapp()">
    <div id="div1" class="div1">div1
        <div id="div2" class="div2">div2
            <div id="div3" class="div3">div3</div>
        </div>
    </div>
</body>

</html>

attwice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
百赢出品，必属精品
04-11 5020
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
JavaScript事件处理程序详解
10-19
不过，通过eventUtil对象提供的addHandler和removeHandler方法，展示了如何使用DOM2级事件处理程序，其中addHandler方法检查浏览器兼容性并相应地使用addEventListener或attachEvent方法，removeHandler方法则是对应...
js事件 -- addEventListener事件
banni6813的博客
05-08 427
百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖，概念如下： 同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数 其实不然，官网讲解 添加的事件不会覆盖已存在的事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 2471
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
HTML DOM 事件
akuibpt23191的博客
07-13 587
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
javascript addEventListener讲解
iteye_19838的博客
06-20 272
对同一个事件添加多个处理程序有如下两种方法： [code="js"] 1、window.onload = function() {f(); f1(); f2(); ...} 2、if(window.addEventListener){ //firefox window.addEventListener('load',f,false); windo...
addEventListener事件
血色残阳的专栏
03-30 1051
addEventListener(type:String ,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)       useCapture  表示是否打开捕获事件，默认为false       priority    表示监听器的优先级，默认为0，优
详解js的事件处理函数和动态创建html标记方法
10-20
更好的做法是使用`addEventListener`或在HTML元素上直接使用`on<event>`属性来绑定事件处理函数。 ### 2. 动态创建HTML标记的方法 动态创建HTML标记主要分为两种方式： #### a. 传统方法 - **document.write方法...
详解javascript中的事件处理
10-23
3. 通过`attachEvent`方法注册事件处理程序：这一方法主要在旧版的IE浏览器中使用，现已不推荐使用，因为`addEventListener`提供了更广泛的支持和更好的性能。 通过理解这些基本概念和机制，可以更好地控制...
详解javascript跨浏览器事件处理程序
11-23
首先，我们需要理解两个主要的事件处理方法：`addEventListener` 和 `attachEvent`。`addEventListener` 是W3C标准方法，适用于大部分现代浏览器（如Chrome、Firefox、Safari和Opera）。而`attachEvent` 是Internet ...
JavaScript onclick事件使用方法详解
10-15
我们可以将一个函数引用赋值给HTML元素的`onclick`属性，或者在JavaScript中通过`addEventListener`或`attachEvent`（IE浏览器特有）来添加事件监听器。对于简单的功能，直接在HTML中设置`onclick`属性即可： ```...
addEventListener事件委托
weixin_30240349的博客
05-10 1008
什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处1，提高性能。 好处2，新添加的元素还会有之前的事件。 基本格式：元素.addEventListener（type, fn ...
addeventlistener 事件监听
WebDestiny的博客
08-30 1004
语法 element.addEventListener(event, function, useCapture)； event 为必须参数，类型为字符串，用于指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 function 也为必须参数。指定要事件触发时执行的函数。 事件对象会作为第一个参数传入函数。 事件对象的类型...
addEventListener()事件监听
m0_73493686的博客
10-24 649
您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。方法时，JavaScript与HTML标记分离，以提高可读性，方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。并允许您添加事件侦听器，即使您不控制HTML标记也是如此。方法可以更容易地控制事件对冒泡的反应。方法将事件处理程序附加到指定的元素。方法轻松删除事件侦听器。
addEventListener() 事件监听
热门推荐
boysky0015的博客
06-14 3万+
无意间有人问到了，这个方法，我就学了一下，顺便敲了一个小demo。 addEventListener() 用于向指定元素添加事件。 可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法： element.addEventListener(event,fn,useCaption ); 参数说明：tr件，比如 click mouseenter mouseleave
JavaScript 的addEventListener() 事件监听详解！
一亩地的专栏
12-19 5768
JavaScript 的addEventListener() 事件监听详解！ addEventListener() 用于向指定元素添加事件。  可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法：  element.addEventListener(event,fn,useCaption );  参数说明：tr件，比如 click mouseenter mouselea...
js addEventListener绑定事件方法(详细介绍）
m0_47659279的博客
04-04 9346
事件冒泡 如果两个元素是嵌套的，那么当子元素事件触发后，父元素的对应事件会随后触发，这种事件自下而上的触发就是事件冒泡，类似水中的气泡往上冒 例如下面代码，点击son元素后先触发son的点击事件，然后触发parent的点击事件 <div id="parent" onclick="alert('parent')"> parent <div id="son" onclick="alert('son')">son</div> </div> 事
JavaScript事件处理详解
这通常通过在HTML元素上设置事件处理属性（如`onclick`）或使用JavaScript的`addEventListener`和`removeEventListener`方法实现。 3.4 浏览器兼容性 早期的浏览器如Internet Explorer 4（IE4）和Netscape ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值