JS学习（13）----eventlistener

最新推荐文章于 2024-09-18 22:46:48 发布
最新推荐文章于 2024-09-18 22:46:48 发布
阅读量560 收藏
点赞数
分类专栏： web 文章标签： javascript event listener
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lichen_yun/article/details/76002489
版权

事件监听器的使用

eventListener的使用与前面事件的处理非常的相似，需要注意在事件监听器中事件的前缀“on”需要去掉，如onclick,在这里应该是click，onmouseover在这里是mouseover
用前面文章中的一个栗子做示范：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

</head>
<body>
    Text: <input type="text" id="txt"></body>
    <script src="script.js"></script>
</body>
</html>
/* 
* @Author: Lin
* @Date:   2017-07-24 10:17:36
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-24 10:45:53
*/
document.getElementById("txt").addEventListener("focus", changeColor);
function changeColor() {
    document.getElementById("txt").style.backgroundColor = "lightBlue";
}
document.getElementById("txt").addEventListener("focus", changeColor);
// 或者是：
document.getElementById("txt").addEventListener("focus", changeColor,true);

另外有removeEventListener.其使用方法与addEventListener相同。

晨识草
关注
专栏目录
详解js中EventListener监听器（事件委托/事件代理）
m0_46862838的博客
05-11 4436
监听器： 语法：**addEventListener(event,function,userCapture)**方法 第一个参数写事件句柄，不需要加"on",直接写时间名就可以（如：click） 第二个参数是事件触发后调用的函数 第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选值，默认值为false，即冒泡传递，当值为true时，为捕获传递 触发监听器事件: //第二个参数写匿名函数 <button id="btn"></button> <script> do
JS EventListener
SeriousLose
06-26 557
addEventListener 添加监听的事件 阻止默认事件preventDefault() 阻止事件冒泡stopPropagation() removeEventListener 移出事件 💡 removeEventListener 需要知道你需要移出的是哪个事件处理函数。匿名函数丢弃了自身函数名，是移出不了。 💡 IE9以下的IE浏览器不支持 addEventListener...
JavaScript DOM EventListener
松柏手记
04-02 334
addEventListener() 方法
Javascript（四十一）Event事件监听器
weixin_44730244的博客
06-03 867
事件监听器：addEventListener（）方法用于向指定元素添加事件监听，IE8以下不支持，火狐和谷歌支持。 普通的事件绑定： 元素节点.on+事件类型=匿名函数 缺点：1.重复事件会被覆盖 缺点2：事件移除使用简单粗暴的null代替事件处理函数 addEventListener事件绑定： target.addEventlistener(‘事件类型’，匿名函数/执行函数名，false/true) 注：匿名函数名没有双引号 第三个参数是否使用捕获（捉)(反向冒泡)，默认为false，为冒泡 好处：可
JS事件监听器
wang_swa99er的博客
09-13 3039
1.传统事件绑定 1.重复添加事件会覆盖 2.不能精确的删除事件上的某一个函数 2.事件监听器(给某个按钮需要绑定多个函数，精确删除) 低版本IE浏览器不兼容 addEventListener() 格式：node.addElementListener("click") 参数： 第一个参数 事件类型 第二个参数 绑定函数 第三个参数 布尔值 true 事件捕获
debug-event-listener.rar_The Listener
09-21
在这个压缩包中，我们有两个核心文件：10.1.4-4.js和debug-event-listener.js，它们可能包含了实现这一功能的具体代码。 首先，让我们深入了解`Debug`对象。在某些环境中，如Chrome开发者工具或Node.js，`Debug`...
event-listener:一个程序，用于检查用户进行的某些事件
03-20
"event-listener-master"这个压缩包文件可能包含了该程序的源代码，包括HTML、CSS和JavaScript文件。开发者可以通过查看和学习这些代码，理解事件监听器的实现细节，以及如何在实际项目中应用它们。 总结来说，...
audio-listener-html:HTML中的音频监听器
04-29
而JavaScript的API则允许我们通过编程方式与这些元素进行交互，实现更加复杂的音频控制和事件监听。本文将深入探讨如何在HTML中使用音频监听器...通过学习和实践，我们可以利用这些工具创造出丰富多样的音频交互体验。
Laravel开发-laravel-event-worker
08-28
在Laravel框架中，事件（Event）和工作者（Worker）是两个重要的概念，它们帮助开发者实现应用程序中的异步处理和消息队列。本教程将深入探讨Laravel Event Worker的使用和工作原理，以及如何在实际项目中应用这些...
springMVC学习--8 SSE(Server Send Event)--服务端推送技术之一
xiewz1112的博客
06-06 2309
SSE技术，即Server Send Event与异步Servlet 3.0+、Websocket等为服务器端推送技术。SSE技术的特点是使用Http协议，轻量级易使用，在服务器端只要通过ContentType=“text/event-stream; charset=UTF-8”标明支持SSE即可，客户端也只需要建立请求到服务器端url的EventSource，再在EventSource上注册Ev...
event_listener.jsx
04-28
event_listener.jsx PS事件监听脚本 1、修改脚本监听数据本地化语言显示 ---0.02-01 2、函数增加注释当前历史记录名称 ---0.02-02 https://blog.csdn.net/greless/article/details/105811358
JavaScript对HTML DOM使用EventListener进行操作
11-25
addEventListener() 方法 实例 点用户点击按钮时触发监听事件： document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。 你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。 ad
js中addEventListener()与removeEventListener()用法案例分析
11-21
本文实例讲述了js中addEventListener()与removeEventListener()用法。分享给大家供大家参考，具体如下： 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法，用于追加事件和删除追加。 接受参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 (3个) 最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false; 事件传递有两种方式：冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div>
event_listener.7z
01-06
event_listener.jsx PS事件监听脚本 1、修改脚本监听数据本地化语言显示 ---0.02-01 2、函数增加注释当前历史记录名称 ---0.02-02 https://blog.csdn.net/greless/article/details/105811358
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
★★光亭★★
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
addEventListener方法与on事件的区别
热门推荐
knight-yun的博客
06-01 1万+
文章出自个人博客https://knightyun.github.io/2018/05/31/js-eventlistener，转载请申明 on事件 Javascript中可以对一些页面的事件设定触发值，例如常用的点击 onclick，鼠标移动 onmousemove，或者移动端屏幕点击 ontouchstart，其它类似的还有 onmousedown, onmouseup, onch...
JS HTML DOM EventListener
weixin_34301132的博客
11-01 181
1、格式 element.addEcentListener(arg1,arg2,arg3); 三个参数分别是：event、function、useCapture （1）event：事件名称，注意不加“on”。例如单机事件 ”onclick“ 要写成 “click”。 （2）function：直接写函数名称，不加括号。例如：myfunction 而不是 myfunction（）。 （2）u...
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
百赢出品，必属精品
04-11 5378
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
js 3个事件监听器 EventListeners
waterHBO的博客
09-18 1104
某视频网站，我想一边播放视频，一边搞其他。但是，当我把鼠标移动到浏览器外面，点击一下别处， 视频就会自动暂停. 这个叫做。// 当窗口重新获得焦点时恢复播放。// 当页面变为不可见时暂停视频。// 当窗口失去焦点时暂停视频。然后视频就能正常播放了。
Error occurs in an event listener: touch-end
最新发布
09-25
在JavaScript中，`touch-end` 事件通常会在手指从触摸屏幕表面抬起时触发，用于跟踪用户的触控动作。然而，如果你遇到 `Error occurs in an event listener: touch-end` 这样的错误，可能是以下几个原因导致的： 1. **无效的事件监听器**：检查你在触摸结束事件上是否正确地绑定了监听器，并且这个监听器是否存在并可以正常访问。 ```javascript element.addEventListener('touch-end', function() { // Your code here }, false); ``` 2. **回调函数错误**：如果在事件处理函数内部有语法错误或者逻辑错误，可能会引发运行时错误。确保代码块没有语法错误且逻辑正确。 3. **DOM元素已移除**：如果你在事件注册后删除了相关的DOM元素，那么相应的事件监听会失效，这可能导致错误。确保在移除元素之前已经解绑了所有事件。 4. **浏览器兼容性问题**：某些旧版本的浏览器可能不支持`touch-end` 或者其API存在一些限制，确保你的代码兼容目标浏览器。 5. **异步问题**：如果在事件处理函数中有异步操作，而这些操作未正确完成就返回，可能会导致后续的错误。考虑使用Promise或async/await进行同步处理。 为了解决这个问题，你可以试着检查上述几个方面，找出具体的错误源。如果有详细的错误堆栈信息，那将有助于更快定位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值