重写jQuery函数时，Vanilla JS中与focusout()等效的方法是什么？

1. 触发元素失去焦点（对应你的代码场景） #

你的jQuery代码inputBox.focusout()是主动触发目标元素的失去焦点事件，原生JS里直接调用元素的blur()方法就能实现完全一致的效果：

// 获取原生DOM元素
const inputBox = document.querySelector('.searchbox-input');
// ...
// 触发失去焦点事件
inputBox.blur();

2. 绑定失去焦点事件监听（扩展场景） #

如果是要实现jQuery中inputBox.focusout(function(){ ... })的事件绑定逻辑，原生JS可以通过两种方式实现，对应不同的事件冒泡行为：

方式一：监听blur事件（不冒泡） #

和jQuery的blur()绑定逻辑一致，仅在当前元素触发失去焦点时执行：

const inputBox = document.querySelector('.searchbox-input');
inputBox.addEventListener('blur', function() {
  // 输入框失去焦点时执行的逻辑
  console.log('输入框已失去焦点');
});

方式二：监听focusout事件（支持冒泡） #

和jQuery的focusout()绑定逻辑完全匹配，支持事件冒泡（比如父元素可以监听子元素的失去焦点事件）：

const container = document.querySelector('.search-container');
container.addEventListener('focusout', function(e) {
  // 校验事件触发源是否为目标输入框
  if (e.target.classList.contains('searchbox-input')) {
    console.log('输入框已失去焦点');
  }
});

核心说明 #

jQuery的focusout()触发事件时，本质就是调用了原生的blur()方法，同时会触发冒泡的focusout事件；原生blur()方法直接触发元素失去焦点，和你的jQuery代码效果完全等价。

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