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

将true作为您的 useCapture 参数传递。如MDN Docs for Event Delegation中所述，可能还需要使用聚焦。

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 Docs for General Event Info中发布的不同浏览器在监听事件方面的方式也有所不同：

注意：处理此事件时，Document.activeElement的值在浏览器中会有所不同（错误452307）：IE10将其设置为焦点将移至的元素，而Firefox和Chrome经常将其设置为焦点的主体文档。

Answer 2

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>

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

2 个答案: