html 属性 onblur 和 javascript 触发模糊事件如何工作？答案

【问题标题】：How html attribute onblur and javascript trigger blur event work?html 属性 onblur 和 javascript 触发模糊事件如何工作？
【发布时间】：2021-01-07 16:01:41
【问题描述】：

HTML 属性 onblur 和 jQuery .trigger("blur") 事件如何工作？

这两个事件会像 javascript this.trigger("blur") 一样先执行，然后 HTML 属性 onblur 执行，还是只会触发一个事件？

我在输入元素上使用onblur 属性，在某些情况下，我使用 javascript 触发了该事件，但我的函数正在执行多次。我认为模糊事件触发了两次，那我怎么能只触发一次呢？

这里是 HTML 元素。

<input class="form-control"
       type="text"
       id="ListDisplay"
       onblur="changeVal()"
       autocomplete="off"
       value="${name}"
       display="${name}"
/>

这是触发模糊的 jquery 事件。在这个 showSuggestionListItem 中是一个动态下拉列表。

$(".showSuggestionListItem").off('mousedown').on('mousedown',
  function () {
    $('#ListDisplay').trigger("blur");                          
  }
);

这里是onblur的changeVal函数。

function changeVal(){
    alert('called');
}

【问题讨论】：

什么是elem？什么是. showSuggestionListItem
您为什么不简单地调用该函数而不是调用/触发不相关的混淆事件？作为一名程序员，如果您需要致电changeVal，您会立即知道自己在做什么。相反，如果您调用.blur() 或trigger("blur")，则必须遍历整个代码库以查找并了解它应该做什么以及会发生什么。 .on('mousedown', changeVal) 比其他任何东西都干净。
请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example 您当前的示例令人困惑，没有多大意义。

标签： javascript html jquery jquery-ui

【解决方案1】：

使用onBlur 属性只是将回调分配给 Blur 事件。 .trigger("blur") 触发 blur 事件。

由于您在另一个事件中有一个触发器，所以在文本字段之外单击的行为会触发一个模糊事件，该事件可能会在mousedown 事件之前冒泡；因此为什么会触发两个 blur 事件。

我建议如下。

$(function() {
  function changeVal() {
    console.log('Blur called');
  }
  $("#ListDisplay").blur(changeVal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" type="text" id="ListDisplay" autocomplete="off" value="${name}" display="${name}" />

【讨论】：