addEventListener与removeEventListener

最新推荐文章于 2025-06-08 03:54:53 发布

一麻袋小猫

最新推荐文章于 2025-06-08 03:54:53 发布

阅读量500

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/104985410

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文详细解析了如何正确地使用addEventListener()和removeEventListener()来添加和移除事件处理程序，强调了匿名函数在移除过程中的局限性，并通过实例展示了正确的实践方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；

移除时传入的参数与添加处理程序时使用的参数相同。

这里要注意的是：通过addEventListener()添加的匿名函数无法移除，也就是removeEventListener()在移除addEvenListener添加的事件的时候，不能移除匿名函数，必须是function move() {} 函数

下面这段代码是正确的：

 document.addEventListener('mousemove', move);

            function move(e) {
                // console.log(x, y);
                //用 e.pageX - x 就是盒子应该得到的距离
                table.style.left = e.pageX - x + 'px';
                table.style.top = e.pageY - y + 'px';
                console.log(1);


            }
            document.addEventListener('mouseup', function() {
                // console.log(1);
                document.removeEventListener('mousemove', move);

            })

而下面这段代码时错误的：

document.addEventListener('mouseup', function() {
                // console.log(1);
                document.removeEventListener('mousemove', function(e) {
                    table.style.left = e.pageX - x + 'px';
                    table.style.top = e.pageY - y + 'px';
                });

            })