#神仙见了会流泪的#addEventListener()用法

最新推荐文章于 2023-02-13 16:01:08 发布
最新推荐文章于 2023-02-13 16:01:08 发布
阅读量118 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44189881/article/details/107345764
版权

各位晚上吼啊，这次又是神仙见了会流泪的专题，顾名思义，又是一个非常简单的内容，这次的内容主要是事件的绑定，往下看就知道有多简单了。
众所周知，想要绑定响应函数，就需要使用对象.事件 = 函数的形式绑定响应函数，但这种方式只能同时为一个元素的一个事件绑定一个响应函数，如果想绑定多个响应函数，后绑定的响应函数就会覆盖先绑定的响应函数，那么，如果我就想绑定多个响应函数呢
那就要用到它了 ---- addEventListener()
addEventListener()的参数：1、事件的字符串(不加on)
2、回调函数
3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false
具体怎么用呢，就看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script >
        window.onload = function(){
            //点击按钮后弹出一个内容
            var btn = document.getElementById("btn")

            btn.addEventListener("click",function(){
                alert(1)
            },false)
            
            btn.addEventListener("click",function(){
                alert(2)
            },false)
            
        }
    </script>
</head>
<body>
    <button id="btn" >点一下</button>
</body>
</html>

这应该能能看懂吧，注意点是事件的字符串需要加引号，但这种方法也有一个缺陷，就是万恶的ie8不能兼容，不过现在也没多少人用ie8了吧。。。
溜了溜了

其实我十八
关注
javascript attachEvent和addEventListener使用方法
10-30
在上面的示例中，如果浏览器支持 addEventListener，就会使用该方法；如果不支持，则会回退到使用 attachEvent 方法。这可以确保无论在哪种浏览器中，事件处理函数都能被正确绑定。 使用 addEventListener 方法时，...
document.addEventListener使用介绍
09-04
了解了`addEventListener`的基本用法后，我们可以进一步探讨如何使用它来实现更复杂的功能，比如阻止事件冒泡或默认行为。通过在事件处理程序中调用`event.stopPropagation()`，可以防止事件继续向上冒泡到父元素；...
addEventListener 的用法示例介绍
xyjikl
07-13 1284
(要注意的是div必须放到js前面才行) 一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如： 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getEleme
addEventListener() 方法 实例 点用户点击按钮时触发监听事件：
jsrgxll的博客
10-15 3610
ddEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。 addEventListen
addEventListener
weixin_33898233的博客
11-13 991
先看个例子： document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 1 2 3 定义和用法 addEventListener() 方法用于向指定元素添加事...
addEventListener() JS事件监听 方法
weixin_56893328的博客
02-13 3979
事件对象的类型取决于特定的事件。playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
slider.addEventListener is not a function
Youthenen的博客
02-08 547
原因：一般这种报错都是因为选择器没有正确选择对象。 场景：我这里是将slide事件绑定在container上 而我在监听的时候一开始写的是slider.addEventListener, 后面改成container就可以了。
动态的绑定事件addEventListener方法的使用
09-04
在本文中，我们将深入探讨`addEventListener`方法的使用，这对于创建响应式的Web应用至关重要。 `addEventListener`是DOM（文档对象模型）级别2事件处理程序的一部分，它允许我们为一个元素添加一个或多个事件...
JavaScript中 对象.addEventListener(事件名称,事件处理函数,布尔值)事件监听
weixin_51855195的博客
03-28 278
对象.addEventListener(事件名称,事件处理函数,布尔值)事件监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
js事件
ym深的博客
10-19 129
事件的分类 鼠标事件 滚轮事件 键盘事件 DOM0级事件 通过事件绑定的形式，dom元素只能有一个事件处理函数，则这种形式叫做DOM0级事件 通过DOM0级事件绑定点击事件 var box=document.getElementById("box"); box.onclick=function(){ console.log("我被点击了"); } 移除绑定的点击事件 box.onclick...
addEventListener循环绑定出现问题
qwe19991123的博客
03-05 588
今天在写轮播图下面按钮绑定对应图片时这样写的 for(var i = 0 ; i < img_contents.length ; i ++){ clicks[i].addEventListener( "click" ,function(){ slide_img.style.marginLeft = -imgWidth * i + "px" }) ...
javascript的addEventListener() 方法
qq_32666545的博客
08-19 3893
...
php 下拉刷新返回几条数据,选项卡切换+下拉刷新+动态获取数据
weixin_31368213的博客
04-07 144
document.getElementById('slider').addEventListener('slide', function(e) {if (e.detail.slideNumber === 1) {status = '0';} else if (e.detail.slideNumber === 2) {status = '4';}else if (e.detail.slideNumb...
mui开发app教程-1
wltsysterm的博客
03-05 1987
上一篇：前言 创建项目方式 创建基于mui的app的项目的方式有很多种： 笔者选用最简单的模板（因为这样才能最灵活的演示整个mui开发app的教程）： 点击创建(其中guide.html是我自己创建成功后新建的文件)： 功能1：引导页 初次使用app，或者版本更迭，都需要引导页来展示app的新功能。 引导页一般需要全屏显示，这样看起来效果更好如下： 转...
HTML DOM 事件
akuibpt23191的博客
07-13 601
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
addEventListener()
qq_41918834的博客
01-11 1566
https://www.cnblogs.com/mcdnf/p/5347537.html 先看个例子： document.getElementById(“myBtn”).addEventListener(“click”, function(){ document.getElementById(“demo”).innerHTML = “Hello World”; }); 定义和用法 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener()
addEventListener() 方法用于向指定元素添加事件句柄。
ztao2333的博客
09-15 859
[code="java"]就是在JS中给HTML增加事件[/code] [code="java"] 菜鸟教程(runoob.com) 该实例使用 addEventListener() 方法在按钮中添加点击事件。 点我 document.getElementById("myBtn").addEventListener("click", function(){ ...
tab选项卡（mui）
Vivianluolita的专栏
05-16 1430
职工医疗 城乡医疗 补充医疗 111 222 333
addEventListener 用法
最新发布
10-22
下面是一个使用addEventListener()方法的示例： ``` document.getElementById("myButton").addEventListener("click", function(){ alert("Button clicked!"); }); ``` 这将在id为“myButton”的按钮上添加一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值