为什么发生模糊事件时控制台.log无法运行？

Question

function  fix(event){
console.log("hello");        
} 
document.addEventListener("blur",fix,false);

<table>
	<tr>
<td>class</td>
<td><input type="text" class="data"></td>
	</tr>
	<tr>
<td>name</td>
<td><input type="text" class="data"></td>
	</tr>
</table>

js函数如此简单。
我希望console.log发生模糊事件时执行，无论鼠标的焦点偏离哪个输入，hello显示在控制台上。
我的修复功能有什么问题？

Answer 1

blur不会冒泡，因此如果您像这样使用事件委托，它将不可见 - 只有当它的侦听器直接附加到相关元素时，您才会看到blur事件。如果要使用事件委派，请改为侦听focusout事件：

function fix(event) {
console.log("hello");
}
document.addEventListener("focusout", fix, false);

<table>
<tr>
<td>class</td>
<input type="text" class="data"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" class="data"></td>
</tr>
</table>

另一种可能性是在捕获阶段侦听blur事件：

function fix(event) {
console.log("hello");
}
document.addEventListener("blur", fix, true);
//                                     ^^^^

<table>
<tr>
<td>class</td>
<input type="text" class="data"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" class="data"></td>
</tr>
</table>

Answer 2

传递true作为您的 useCapture参数。 如事件委派的 MDN 文档中所述，可能还需要使用焦点。

function fix(event) {
console.log("hello");
}
document.addEventListener("blur", fix, true);

<table>
<tr>
<td>class</td>
<td><input type="text" class="data"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" class="data"></td>
</tr>
</table>

正如MDN文档一般事件信息中所发布的那样，不同的浏览器在侦听事件的方式上有所不同：

注意：处理此事件时，Document.activeElement 的值因浏览器而异(错误 452307(：IE10 将其设置为焦点将移动到的元素，而 Firefox 和 Chrome 通常将其设置为文档正文。