JavaScript HTML DOM之 addEventListener()

最新推荐文章于 2024-04-11 19:26:38 发布
最新推荐文章于 2024-04-11 19:26:38 发布
阅读量376 收藏
点赞数
分类专栏： 基础部分 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zero_1996/article/details/73140390
版权
  • addEventListener() 方法用于向指定元素添加事件句柄。
  • addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

该方法的标准形式：element.addEventListener(event, function, useCapture);
event为事件：click 或者 mouseover/mouseout

function为函数，即自定义的方法

useCapture为描述事件，可以不用。

具体事例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
//新附加了一个弹窗的点击事件。
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

多个函数的附加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

多个事件的叠加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
    //监听光标的移动
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
    //监听点击
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
    //监听光标的移动
}
</script>

</body>
</html>
zero_1996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM（四）
weixin_62343228的博客
03-14 1463
事件进阶、事件对象、鼠标事件和键盘事件
JavaScript HTML DOM+事件+节点与元素
weixin_43187545的博客
10-28 120
1.HTML DOM (文档对象模型) 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 1.JavaScript 能够改变页面中的所有 HTML 元素 （1）查找 HTML 元素： 通过 id 找到 HTML 元素:document.getElementById(&quot;intro&quot;); 通过标签名找到 HTML 元素:document.getElementsByTa...
HTML DOM addEventListener() 方法
EchoLiner的博客
03-17 421
document.addEventListener() 方法用于向文档添加事件句柄。
JavaScript addEventListener()事件监听方法
weixin_30300225的博客
08-06 979
addEventListener()方法将事件处理程序附加到指定的元素。 addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。 您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。 您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。 addEvent...
DOM方法addEventListener详解
jinfeiji的专栏
11-12 653
DOM方法中的addEventListener(事件名称，事件函数，指定事件函数执行时间或阶段) 说明： 事件名称：String 事件函数：要触发的事件处理函数function 指定事件函数执行时间或阶段：该值为boolean，当值为true的时候，表示在捕获阶段执行事件函数；值为false是表示在冒泡阶段执行事件函数。 ...
addEventListener() 方法 事件类型
sunsktop的博客
08-09 1920
addEventListener() 方法 事件类型
JavaScript-addEventListener()
tian_tian_gong的博客
02-18 393
addEventListener() 方法用于向指定元素添加事件句柄。 正常我们为一个标签元素绑定事件可以这么写: xxx.onclick=function(){ } 但当我们有同一个事件想绑定多个函数的时候， 上面的事件函数就会只执行最后的一个，前面的被覆盖掉。 此时可以选择用addEventListener这种方法来为标签绑定事件。 注意: addEventListener() ie8及...
详解JavaScript操作HTML DOM的基本方式
10-23
JavaScript操作HTML DOM是一种核心技能，它允许开发者动态地更新、添加和删除网页内容。HTML DOM，全称为“文档对象模型”，是一种W3C标准，它为HTML和XHTML文档提供了一个结构化的表示，并且允许使用JavaScript或...
JavaScript 和 HTML DOM 参考手册
12-13
JavaScript 和 HTML DOM 是Web开发中的两个关键组成部分，它们一起构成了网页动态交互的基础。JavaScript是一种广泛使用的客户端脚本语言，用于增强网页的交互性，而HTML DOM（文档对象模型）是HTML和XML文档的一种...
JavaScript HTML DOM EventListener
01-19
JavaScript HTML DOM EventListener addEventListener() 方法 实例 在用户点击按钮时触发监听事件： document.getElementById(myBtn).addEventListener(click, displayDate); addEventListener() 方法用于向...
JavaScript-DOM实战案例
09-18
JavaScript DOM（Document Object Model）是Web开发中的一个关键技术，它允许我们通过编程方式与HTML或XML文档进行交互。DOM将整个网页结构表示为一个树形的节点结构，每个元素、属性甚至文本都对应一个节点。在...
DOM使用addEventListener()
hjy170314的博客
06-21 540
addEventListener() 给元素添加事件，用来指定元素添加事件句柄 可以使用 removeEventListener()来移除 addEventListener()添加的事件句柄 element.addEventListener(event,function,useCapture) 注释： event: 事件名，不可省略,这里不需要"on"前缀，直接写“click"即可 function：指定事件需要执行的函数 useCapture: 布尔值，指定事件是否在捕获或冒泡阶段执行
Dom多个事件绑定addEventListener、鼠标事件、拖拽元素
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
03-15 1323
addEventListener() - 也可以通过addEventListener()来为元素绑定事件 addEventListener(type, listener [, useCapture]) - 参数： type 要监听的事件的字符串，注意这里不需要写on listener 回调函数，当事件发生后调用的函数 useCapture 布尔值，是否在捕获阶段触发事件，一般都是false 通过addEventListener()可以为一个元素的一个事件绑定多个响应函数， 这样当事件被触发时
DOM事件监听 ---- 注册事件（常用） ---- 删除事件（常用）
LQlove1的博客
06-19 590
addEventListener（）和 removeEventListener（）
HTML DOM addEventListener（）方法 ---- 2021/7/15
qq_43186285的博客
07-15 333
定义和用法：
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
最新发布
百赢出品，必属精品
04-11 4041
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
HTML之addEventListener、removeEventListener
weixin_33785108的博客
12-29 123
addEventListener方法与attachEvent方法功能相同．但是addEventListener是W3C标准，而attachEvent非W3C标准，且只支持IE浏览器．虽然addEventListener属于标准方法，但依然无法在IE下运行．IE不支持该方法.addEventListener带有三个参数．必须设置．缺一不可．addEventListener可以为...
微信开放标签使用注意说明
qq_16683523的博客
09-05 895
待发布
EventBus3.0源码简析
养生阿华田
08-28 283
本文主要通过源码讲解EventBus的内部实现，如果还没有使用过该框架的朋友，可以先参考这篇文章 Android事件总线（一）EventBus3.0用法全解析
JS操作元素方法
08-19
JS操作元素方法 总计 JS操作元素方法 总计 JS操作元素方法 总计

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值