如何根据输入类型合并不同的jQuery事件处理器？

问题背景 #

我有多个输入框，其中一个是type="range"的价格滑块。目前分开使用两个事件处理器：

• 针对非range输入框，用input事件触发请求：

$('body').on('input', 'selector', function(e){
  if(e.target.type == 'range') {
      return; // 跳过range类型，用另一个处理器
  }
  xhr_filter = $.ajax({
      // 请求逻辑...
  });
});

• 针对range输入框，用change事件触发请求（避免滑动时持续触发）：

$('body').on('change', 'selector', function(e){
  xhr_filter = $.ajax({
      // 请求逻辑...
  });
});

想把这两个处理器合并成一个，请问该怎么实现？

解决方案 #

可以通过同时绑定input和change两个事件，在回调函数里根据元素类型和事件类型判断是否执行请求逻辑，这样就能合并成一个处理器：

$('body').on('input change', 'selector', function(e) {
  // 规则：range类型只在change事件时执行，其他类型只在input事件时执行
  if (
    (this.type === 'range' && e.type !== 'change') ||
    (this.type !== 'range' && e.type !== 'input')
  ) {
    return; // 不符合触发条件，直接返回
  }

  // 统一的AJAX请求逻辑
  xhr_filter = $.ajax({
      // 请求配置...
  });
});

更简洁的写法 #

利用三元表达式简化判断逻辑，代码更紧凑：

$('body').on('input change', 'selector', function(e) {
  // 只有当range触发change，或非range触发input时才执行
  if (!(this.type === 'range' ? e.type === 'change' : e.type === 'input')) {
    return;
  }

  xhr_filter = $.ajax({
      // 请求逻辑...
  });
});

这样就把两个事件处理器合并成了一个，同时保留了原有的触发规则：普通输入框实时响应input事件，range滑块只在滑动结束（change事件）时触发请求，避免了滑动过程中频繁发送请求的问题。

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