addEventListener与removeEventListener

最新推荐文章于 2023-12-24 14:17:15 发布

原创最新推荐文章于 2023-12-24 14:17:15 发布 · 580 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

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

通过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';
                });

            })