jQuery 事件触发两次

Question

谁能解释一下为什么这个事件会触发两次？在 1.7 之前的 jQuery 版本上似乎没有这样做。

<input type="textbox" id="box" onblur="console.log('This will trigger twice!');"/>
<script>
$('#box').blur();
</script>

小提琴： http://jsfiddle.net/EWbmD/52/

Answer 1

从内部来看，触发blur 事件似乎是在内部触发blur 和focusout 事件，这两次调用onblur。

概念验证

$('#box').on('blur focusout', function (e) {
    console.log('this too', e.type);
});
$('#box').blur();

演示：Fiddle

blur 事件是非冒泡事件，冒泡对应事件是 foucsout 事件。所以在正常情况下，模糊操作会触发这两个事件。因此 jQuery 试图变得智能并在发生模糊事件时触发这两个事件，但看起来实现中存在错误。

Answer 2

编辑：这可能是您的问题的解决方案。

JSFIDDLE http://jsfiddle.net/SvqwF/7/

基于focusout。

---

你触发了两次，因为.blur()被触发了

.on('blur focusout', function(){}) (Thanks to @Arun P Johny)

如果您没有将函数传递给.blur()，它只会触发您添加的内联event listener。 JSFIDDLE

由于您添加了一个内联函数，该函数会被触发两次。

说明：将事件处理程序绑定到“模糊”JavaScript 事件，或在元素上触发该事件。 jQuery .blur()

要了解更多关于 jQuery 所涉及的方法（对于旧的 IE .attachEvent）：

要为目标注册多个事件侦听器，请为同一目标调用 addEventListener() 但具有不同的事件类型或捕获参数。 MDN

注意：我不确定要在.on() 中声明哪个事件，似乎一切正常

W3C 将焦点和模糊事件指定为不冒泡，但 jQuery 定义了会冒泡的跨浏览器“focusin”和“focusout”事件。当 "focus" 和 "blur" 用于附加委托事件处理程序时，jQuery 映射名称并将它们分别作为 "focusin" 和 "focusout" 传递。 jQuery .on()

注意 2： blur() <- empty 是 trigger('blur') 的快捷方式。 JSFIDDLE

Answer 3

你只需要调用一次：

$('#box').on('blur', function() {
    console.log('This will trigger twice!');
});

$('#box').blur();

Updated Fiddle

或者只是删除您的 jQuery 代码并将您的 onblur 事件保留在您的 input 标记中。