如何实现JavaScript/JQuery的Escape键绑定事件？

嘿，我太懂你查了好几天文档却摸不着头绪的感觉了——其实这个需求真的很容易实现，只是你需要把ESC键操作包装成一个能和标准DOM事件一起绑定的自定义事件就行！

首先得理清一个关键点：blur、mouseleave是浏览器原生支持的标准事件，但ESCAPE本身不是事件，它只是键盘事件（keydown/keyup）里的特定按键值，所以直接写在on()方法里肯定无效。下面给你两种实用的解决方案：

方案一：直接在绑定中判断按键（快速简单） #

如果只是单个元素需要这个逻辑，直接在keydown事件里判断是否是ESC键就行，不用额外封装：

$('element').on('blur mouseleave keydown', function(event) {
  // 匹配blur、mouseleave事件，或者ESC按键（推荐用event.key而非keyCode，后者已废弃）
  if (event.type === 'blur' || event.type === 'mouseleave' || event.key === 'Escape') {
    // 执行你的业务逻辑
    doStuff();
  }
});

方案二：自定义escape事件（优雅可复用） #

如果多个元素都需要用到这个逻辑，推荐用jQuery的event.special注册一个自定义的escape事件，这样就能完全实现你想要的写法：

// 先注册自定义的escape事件
jQuery.event.special.escape = {
  setup: function() {
    // 当第一次绑定escape事件时，给元素绑定带命名空间的keydown事件
    $(this).on('keydown.escape', function(event) {
      // 判断是否按下ESC键
      if (event.key === 'Escape') {
        // 触发自定义的escape事件
        $(this).trigger('escape');
      }
    });
  },
  teardown: function() {
    // 当移除escape事件时，清理对应的keydown绑定，避免内存泄漏
    $(this).off('keydown.escape');
  }
};

// 现在就可以像你最初想的那样绑定事件啦！
$('element').on('blur mouseleave escape', function(event) {
  doStuff();
});

额外注意点 #

如果你的目标元素是默认不可聚焦的（比如<div>），需要给它添加tabindex="-1"属性，让它能获得焦点，这样keydown事件才能被触发哦！

内容的提问来源于stack exchange，提问作者cherryaustin