基于js的事件循环，点击clear按钮将在输入时触发搜索事件，因此下面的代码将正常工作:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

上面的代码，点击事件预约了这个。_cleared = false事件循环，但该事件将始终在onsearch事件之后运行，因此您可以稳定地检查this。_cleared状态，以确定用户是否刚刚点击X按钮，然后触发onsearch事件。

这可以在几乎所有的条件下工作，粘贴文本，具有增量属性，ENTER/ESC键按下等。

你也可以用一般的方式通过绑定onInput事件处理如下

<input type="search" oninput="myFunction()">

我知道这是一个老问题，但我一直在寻找类似的东西。确定点击“X”以清除搜索框的时间。这里没有一个答案对我有帮助。其中一个很接近，但也受到影响，当用户点击“enter”按钮时，它会触发与点击“X”相同的结果。

我在另一个帖子上找到了这个答案，它非常适合我，只有当用户清空搜索框时才会触发。

$("input").bind("mouseup", function(e){
   var $input = $(this),
   oldValue = $input.val();

   if (oldValue == "") return;

   // When this event is fired after clicking on the clear button
   // the value is not cleared yet. We have to wait for it.
   setTimeout(function(){
     var newValue = $input.val();

      if (newValue == ""){
         // capture the clear
         $input.trigger("cleared");
      }
    }, 1);
});

我想补充一个“晚”的答案，因为我今天在改变、keyup和搜索方面很挣扎，也许我最后发现的东西对其他人也有用。 基本上，我有一个搜索类型面板，我只是想对小X的压力做出正确的反应(在Chrome和Opera下，FF没有实现它)，并清除内容面板作为结果。

我有这样的代码:

 $(some-input).keyup(function() { 
    // update panel
 });

 $(some-input).change(function() { 
    // update panel
 });

 $(some-input).on("search", function() { 
    // update panel
 });

(它们是分开的，因为我想检查在什么时候以及在什么情况下调用它们)。

事实证明Chrome和Firefox的反应是不同的。 特别是，Firefox将更改视为“对输入的每一次更改”，而Chrome则将其视为“当焦点丢失和内容更改时”。 因此，在Chrome上的“更新面板”函数被调用一次，在FF上的每一次击键都被调用两次(一次在keyup，一次在change)

此外，用小X清除字段(在FF下不存在)在Chrome下触发搜索事件:没有keyup，没有变化。

结论?使用input代替:

 $(some-input).on("input", function() { 
    // update panel
 }

在我测试的所有浏览器中，它都具有相同的行为，对输入内容的每一次更改都做出反应(包括使用鼠标复制粘贴、自动补全和“X”)。

至少在Chrome中，搜索输入的“X”按钮似乎发出了一种不同的事件。

MDN上还声明可以触发InputEvent或Event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

下面的测试。您将看到文本输入将是一个InputEvent，带有包含输入字符的“data”属性，单击X按钮将发出一个Event类型。

document.querySelector('input[type=search]').addEventListener('input', ev => console.log(ev))

因此，应能区分使用:

if (ev instanceof InputEvent) { ... }

点击TextField交叉按钮(X) onmousemove()被触发，我们可以使用这个事件来调用任何函数。

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>