document.addEventListener理解

最新推荐文章于 2025-04-20 14:01:07 发布
转载 最新推荐文章于 2025-04-20 14:01:07 发布 · 528 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/gmblog/p/3890016.html
文章标签：

#javascript #ViewUI

本文介绍了JavaScript中事件监听器的添加方法及其执行顺序。通过使用addEventListener，可以控制事件触发的先后顺序，具体取决于最后一个参数的真假值。当设置为true时，事件会先于元素上的其他监听器触发；反之，则会在内置事件处理之后触发。

document.addEventListener("事件名称", 函数, false);


function 某函数(event){
    

       //  方法执行


}

addEventListener里最后一个参数决定该事件的响应顺序；

如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick　


如果为false事件的顺序为 标签的onclick事件 ---- document.onclick  ---- addEventListener

 

理解为其他代码的调用入口

转载于:https://www.cnblogs.com/gmblog/p/3890016.html

51 document.visibilitychange 的回调在切换 tab 的时候调用了两次
970655147的专栏
03-30 1025
第二个框是 上面 4, 5 完成之后的日志, 首先是 初始化的func1, 热部署新增的 func2 在 hidden 的时候调用了一次, 然后是 初始化的func1 + 热部署新增的func2 在 visible 的时候调用而一次, 没有本次热部署增加的 func3 是这个有一定的不确定性, 可能 visible 的时候 事件 func3 还未绑定好。可以根据代码的行号来区分 初始化的func1 和 热部署增加的func2, func3。初始化的 func1 的两行日志输出分别是, 第28, 29 行。
document.addEventListener使用介绍
01-19
document.addEventListener(“事件名称”, 函数, false); 代码如下: function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序； 如果为true事件执行顺序为 addEventListener —- 标签的onclick事件 —- [removed]　 如果为false事件的顺序为 标签的onclick事件 —- [removed] —- addEventListener 理解为其他代码的调用入口
document.addEventListener
weixin_61151047的博客
12-15 1万+
document.addEventListener("事件名称", 函数, false); function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序； document.addEventListener("事件名称", 函数, true): 如果为true时事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick 　 documen...
document.addEventListener的使用介绍
diaobianpan6784的博客
03-02 1382
document.addEventListener("事件名称", 函数, false); function 函数名(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序；如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick...
TypeError document.getElementById(...) is null错误原因
09-03
document.addEventListener('DOMContentLoaded', function() { // JavaScript代码 }); ``` - **将脚本放在`<body>`标签的底部**：这确保脚本在所有HTML元素解析之后才执行，不需要额外的事件监听器。 - **检查...
document.getElementById( backward ).addEventListener
08-12
在你提供的代码中，`document.getElementById( backward ).addEventListener`存在语法错误。`document.getElementById()`方法需要接收一个字符串作为参数，来指定要获取的元素的ID。而在你的代码中，`backward`没有...
addEventListener
m0_64352881的博客
03-27 486
addEventListener注册事件 <body> <div id="box" style="width: 100px;height: 100px;background-color: red"></div> <script> /* 1.dom中注册事件有两种语法 点语法： 只能注册一个‘同名’事件 addEventListener语法 ： 可以注册多
window.addEventListener 和 document.addEventListener
m0_73941339的博客
04-20 1510
本文全面剖析JavaScript中window.addEventListener与document.addEventListener的核心差异，详细对比两者在事件作用范围、触发时机和适用场景上的关键区别。深入讲解窗口级事件与文档级事件的不同处理机制，通过滚动监听、DOM加载检测等实例演示最佳实践方案。掌握这两种事件绑定方式的正确使用场景，能够帮助开发者优化事件处理性能，实现更高效的页面交互逻辑。
window、document添加事件addEventListener
m0_37728716的博客
08-01 1万+
事件捕获，从dom结构上到下，window.addEventListener先于document.addEventListener被捕获 事件冒泡，从dom结构底层向上传递，document.addEventListener先于window.addEventListener被触发 在addEventListener第三个参数处可指定事件是否在捕获或冒泡阶段执行。 element.addEv...
Document.addEventListener--Event handlers(翻译)
风的方向
06-25 303
Document.onfullscreenchange： Document接口的onfullscreenchange属性是fullscreenchange (en-US)事件的处理器，该处理器在文档进入或者退出全屏模式的时候立即触发。 兼容进入全屏 element.requestFullscreen element.mozRequestFullScreen element.msRequestFullscreen element.webkitRequestFullscreen 兼容退出全屏 ...
addEventListener()使用方法
热门推荐
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
DOM（四）：注册和删除事件、DOM事件流、事件对象、事件委托
Hdhhdhbsjxbdhvyg的博客
03-10 1170
addEventListener里面的事件类型是是字符串，必须加引号，而且不带on，function函数叫做监听器（function里面的东西就叫监听器），这个可以给同一个元素添加多个处理函数，比如下面这两段代码页面先警示11，再22。
前端小知识总结
weixin_45869811的博客
01-27 853
1.ES6只能新增值，无法重新赋值就会报错 2.CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值， ES6静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变。2：还有，如果自定义对象，开发者重写prototype之后，原有的constructor会丢失，因此，为了规范开发，在重写对象原型时一般都需要重新给 constructor 赋值，以保证对象实例的类型不被篡改。，用于判断一个变量是否某个对象的实例，内部机制是通过原型链来判断的。
【Web】第三次
weixin_57304642的博客
04-25 1万+
【Web】第三次1.完成学校官方网站页面制作2.使用动画完成过渡+变换效果 1.完成学校官方网站页面制作 2.使用动画完成过渡+变换效果 1.完成学校官方网站页面制作 html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0021)https://w
document.addEventListener("mousemove", this.onDrag);
最新发布
06-01
<think>好的，我现在需要解决用户的问题：如何在JavaScript中使用addEventListener监听mousemove事件并绑定this.onDrag方法。用户提到的是关于事件监听和绑定this的问题，所以我要先理解这两个部分如何结合。 首先，addEventListener的基本用法是元素.addEventListener(事件类型,回调函数)。这里的事件类型是mousemove，所以回调函数会在鼠标移动时触发。但用户需要确保回调函数中的this指向当前对象，也就是this.onDrag方法所属的实例。这时候可能需要用到bind来绑定this的上下文。然后，我想到在JavaScript中，函数内的this默认指向调用它的对象。但当函数作为事件监听器被调用时，this通常指向触发事件的元素，而不是原来的对象实例。因此，使用bind(this)可以确保在onDrag方法中，this仍然指向实例本身，从而能够访问实例的其他属性和方法。 接下来，我需要考虑如何正确地将this.onDrag绑定到事件监听器上。可能有两种方式：一种是在添加事件监听器时直接使用bind，例如element.addEventListener('mousemove', this.onDrag.bind(this))；另一种是在构造函数或初始化时预先绑定this，比如在构造函数中this.onDrag= this.onDrag.bind(this)，然后再添加事件监听器。这两种方法各有优缺点，直接绑定可能在每次调用时创建新函数，而预先绑定则只需绑定一次，更高效。 还需要注意，当需要移除事件监听器时，必须传递相同的函数引用。因此，如果使用bind，每次调用会生成新函数，导致无法正确移除。这时候应该预先保存绑定后的函数，以便后续移除。例如，在类中保存this.boundOnDrag =this.onDrag.bind(this)，然后在添加和移除时使用这个boundOnDrag。另外，用户可能是在类的方法中处理事件，因此需要确保类的实例正确绑定。例如，在类构造函数中绑定方法，或者在添加事件监听器时使用箭头函数，但箭头函数没有自己的this，会继承外层作用域的this，这可能也是一种解决方案，但需要结合addEventListener的使用方式。 可能还需要提到使用箭头函数作为回调，因为箭头函数不会创建自己的this，而是捕获外层this的值。例如，element.addEventListener('mousemove', (e)=> this.onDrag(e))，这样this也会指向实例，但这样可能无法直接移除监听器，除非保存箭头函数的引用。 总结一下，正确的步骤应该是：在类中定义onDrag方法，使用bind在构造函数中绑定this，或者在添加事件监听器时绑定，同时注意保存绑定后的函数引用以便后续移除。此外，给出示例代码会帮助用户更好地理解如何实现。最后，我需要检查是否有遗漏的情况，比如事件监听器的移除、性能考虑，以及可能的内存泄漏问题。确保用户了解如何正确管理事件监听器，避免潜在的问题。</think>在JavaScript中监听`mousemove`事件并绑定`this.onDrag`方法时，需通过`.bind()`保持`this`的上下文。以下是实现步骤： --- ### **步骤说明** 1. **定义方法** 在类或对象中定义`onDrag`方法： ```javascript class DragHandler { constructor(element) { this.element = element; this.onDrag = this.onDrag.bind(this); // 预先绑定this this.element.addEventListener('mousemove', this.onDrag); } onDrag(event) { console.log('鼠标位置:', event.clientX, event.clientY); // 其他操作，this可正确指向实例 } } ``` 2. **绑定事件监听器** 使用`.bind(this)`确保回调中`this`指向当前实例： ```javascript // 若未在构造函数中预先绑定，可临时绑定： element.addEventListener('mousemove', this.onDrag.bind(this)); ``` 3. **移除监听器（如需）** 若需移除监听器，需保存绑定后的函数引用： ```javascript class DragHandler { constructor(element) { this.boundOnDrag = this.onDrag.bind(this); // 保存引用 element.addEventListener('mousemove', this.boundOnDrag); } destroy() { this.element.removeEventListener('mousemove', this.boundOnDrag); } } ``` --- ### **关键点** - **`bind()`的作用**：修正`this`指向，避免因事件触发导致`this`指向DOM元素[^1]。 - **性能优化**：预先绑定`this`可避免重复创建新函数（如将绑定操作放在构造函数中）。 - **箭头函数替代方案**： 使用箭头函数自动继承外层`this`： ```javascript element.addEventListener('mousemove', (e) => this.onDrag(e)); ``` --- ### **示例代码** ```javascript class Draggable { constructor(element) { this.element = element; this.handleMouseMove = this.handleMouseMove.bind(this); this.element.addEventListener('mousedown', (e) => { this.handleMouseMove(e); document.addEventListener('mousemove', this.handleMouseMove); }); document.addEventListener('mouseup', () => { document.removeEventListener('mousemove', this.handleMouseMove); }); } handleMouseMove(event) { this.element.style.left = `${event.clientX}px`; this.element.style.top = `${event.clientY}px`; } } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值