【js】addEventListener() 用法

最新推荐文章于 2024-05-29 16:21:30 发布
最新推荐文章于 2024-05-29 16:21:30 发布
阅读量1.3w 收藏 12
点赞数 4
分类专栏： 【前端】 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a447332241/article/details/73694712
版权

 

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

 

语法

 

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
 <p>该实例使用addEventListener()方法在按钮中添加事件</p>
 <button id="mybtn">点我</button>
 <p id="demo"></p>
<script type="text/javascript">
document.getElementById("mybtn").addEventListener("click",displayDate);
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}	
</script>	
</body>
</html>

 

 

 

 

 

   点击后p标签中会出现显示事件。

 

 

Asher1
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
addEventListener的三种用法
weixin_30642305的博客
11-29 2154
首先addEventListener得API target.addEventListener(type,listener[,options]); target.addEventListener(type, listener [,{capture: Boolean, bubbling: Boolean, once: Boolean}]); target.addEventL...
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4051
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
window.addEventListener 用法
最新发布
ivan5277的博客
05-29 868
是JavaScript中用来为DOM元素（在本例中是浏览器窗口window）添加事件监听器的方法。这对于响应用户操作（如点击、滚动等）或页面/浏览器的特定状态变化非常有用。下面是如何使用。
addEventListener方法
m0_57263959的博客
08-09 1672
是一种强大的机制，可以用于在 JavaScript 中实现对 DOM 元素的事件响应，从而创建丰富的交互式用户界面。，您可以指定在特定事件发生时执行的函数，从而实现对用户交互或其他类型的事件的响应。函数会被调用，并在控制台输出 "Button clicked!示例：在 JavaScript 中使用。是 JavaScript 中用于向。DOM 元素添加事件监听器。将点击事件监听器绑定到。元素上，当按钮被点击时，
addEventListener()使用方法
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
深入理解 addEventListener
Kate_sicheng的博客
07-10 6581
参数一：事件类型，比如 click、mouseenter、drag等。参数二：事件被触发时的回调函数。options对象：useCapture: 默认值为false，事件将在冒泡阶段触发。 如果为true，事件将在捕获阶段触发。once: 表示 listener 在添加之后是否最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。passive: 设置为 true 时，表示 listener 永远不会调用 preventDefault......
JS addEventListener()方法的使用介绍
developerFBI的专栏
05-15 3846
火狐和其他浏览器都支持W3C标准的addEventListener方法。addEventListener() 方法，事件监听。removeEventListener() 方法来移除事件的监听。如果要针对IE浏览器就要使用attachEvent(event,function)。如果你开发前端页面要兼容IE、Chrome、Firefox等浏览器，请参考:https://www.cnblogs.com/carriezhao/p/7270335.html。下面介绍addEventListener()的用法。 ...
javascript attachEvent和addEventListener使用方法
10-30
attachEvent与addEventListener区别适应的浏览器版本不同，同时在使用的过程中要注意
Js on及addEventListener原理用法区别解析
10-15
JavaScript中的事件处理方式有两种主要的形式：`on`属性和`addEventListener`方法。这两种方式在处理事件时有着不同的特性和用法，理解它们的区别和应用场景对于编写高效、可维护的JavaScript代码至关重要。 首先，...
addEventListener 的用法示例介绍
09-04
`addEventListener` 是JavaScript中用于添加事件监听器的方法，它允许我们为同一个元素绑定多个事件处理函数，这对于构建复杂的交互式网页非常有用。在不同的浏览器环境中，`addEventListener` 的使用略有差异，尤其...
js中addEventListener()与removeEventListener()用法案例分析
10-15
主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
胜天半子祁同伟
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
JavaScript--addEventListener()方法
m0_74293254的博客
07-14 932
在上述示例中，我们通过getElementById()方法获取到id为"myButton"的按钮元素，然后使用addEventListener()方法给按钮添加了一个点击事件的监听器。当按钮被点击时，匿名函数将会执行，并在控制台输出"按钮被点击了！对于addEventListener()方法，它用于向指定的元素添加事件监听器，并在该元素上触发指定的事件时执行相应的函数或代码。
JS中addEventListener的用法
热门推荐
Allenyhy的博客
09-30 2万+
事件模型 这是一个完整的事件流： 事件捕获----处于目标----事件冒泡 注意：事件捕获由于浏览器兼容问题用的比较少   事件处理程序（addEventListener） 格式为：element.addEventListener(type, handle, false); type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！ handle...
addEventListener 的使用
weixin_30877493的博客
09-25 669
例如监听页面滚动条的位置 1、html 中定义（获取div高度） <div class="content" > <div class="approval-list" ref="scrollBox"> </div> </div> 2、mounted() 方法 【注 1】监听div滚动条的高度：创建一个监听就要记得销毁，...
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5621
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
angular4点击事件监听_简述 DOM 事件模型与事件委托
weixin_39747975的博客
12-15 188
目录：1.引入2.W3C事件模型3.特例4.事件委托1.引入<div class="grandFather"> <div class="Father"> <div class="Son"> Hello </div> </div> </div>结构：.gra...
Chrome开发工具使用技巧
qq_36697163的博客
12-14 1万+
一、 打开Chrome开发工具 . 在Chrome菜单中选择：更多工具 > 开发者工具 . 页面点击右键 > 检查 . 快捷键也可以用来打开开发工具： Cmd + Opt+ I (Window：Ctrl + Shift + I )或按 F12 二、 Chrome开发简介 目前，开发工具工具主要有八个功能（位置可根据自己需求拉拽调整），本文会重点介绍前四个。 . 元素: 元素面板让你看到一个 DOM 树的全部相关信息，并允许你检查以及在传输过程中编辑 DOM 元素 . 控制台: 为开发者提供了测试
jQuery Mobile事件，开发全解+完美注释
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-05 2887
//使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行 $(document).on("pagecreate","#pageone",function(){ // jQuery 事件... }); //点击事件 $("p").on("tap",function(){ $(this).hide(); }); //长按事件 点击不放（长按） 事件在点击并不放（大约
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 函数来实现相应的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值