javascript - 如何将绑定事件和移除事件封装为一个函数？

问题描述

问 题

我想设置一个名为 bindKeys 的函数，如下：

function bindKeys (flag) {    
    function keydown(e) {
      if (e.keyCode == 27) {
        keys.push('l');
      }
    }        
    function keyup(e) {
      if (e.keyCode == 27) {
        keys.pop();
      }
    }
    if(flag) {
        window.addEventListener('keydown', keydown);
        window.addEventListener('keyup', keyup);
    }else {
        window.removeEventListener('keydown', keydown);
        window.removeEventListener('keyup', keyup);
    }
}

我是想通过flag判断是绑定事件还是解除绑定。
可是我们都知道，每次调用这个函数时，keydown函数和keyup函数都会声名为新的函数，
导致解除绑定失效。
那有没有什么办法实现这一功能呢？难道必须要将keydown函数和keyup函数声名为全局函数吗？求解答！

解决方案

用闭包保留上下文

function bindKeys () {    
    var keydown = function(e) {
      if (e.keyCode == 27) {
        keys.push('l');
      }
    };
    var keyup = function(e) {
      if (e.keyCode == 27) {
        keys.pop();
      }
    };
    return function(flag) {
    if(flag) {
        window.addEventListener('keydown', keydown);
        window.addEventListener('keyup', keyup);
    }else {
        window.removeEventListener('keydown', keydown);
        window.removeEventListener('keyup', keyup);
    }
    }
}

使用：

var fn = bindKeys();
fn(true);
fn(false);

这篇关于javascript - 如何将绑定事件和移除事件封装为一个函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！