jquery one方法实现

sysuzjz

于 2015-12-17 11:32:41 发布

阅读量3.4k

点赞数 1

分类专栏：前端文章标签： one实现 once实现事件处理

本文链接：https://blog.csdn.net/sysuzjz/article/details/50339279

版权

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个使用原生JavaScript实现的类似jQuery中one方法的功能。该方法允许事件仅触发一次，之后自动解除绑定，有效避免了事件累积导致的问题。

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

jquery中有一个方法：one，用途是事件绑定只执行一次就自动解除绑定。源码看了很久头晕，决定自己搞一个。研究了很久，用原生的模拟了一次。我用的名字是once。

最初的方法是这样的：

function once(dom, event, callback) {
    // 这一步是为了避免修改形参
    var temp = callback;
    dom.addEventListener(event, function() {
        if(temp)
            temp();
        temp = null;
    })
}

这种方法是可以的，但有个问题，事件处理函数依然存在，只是什么都不执行而已，久而久之会变得十分臃肿。

替代方法变成在处理函数里解除本身，但如果用匿名函数的话，会陷入可怕的无限递归。

用变量存储的话就能解决了。

function once(dom, event, callback) {
    var handle = function() {
        callback();
        dom.removeEventListener(event, handle);
    }
    dom.addEventListener(event, handle)
}

闲暇娱乐之作，希望能帮到一些人。