focusin详解：理解focusin的多个方面

一、focusing on friends主旨

focusin是一个Javascript的事件，它在一个元素或元素内部被聚焦时触发。focusin主要应当于输入框（input），文本框（textarea）等元素有关。它与focus事件不同的是，focus事件只有在元素被直接聚焦时才会被触发，而focusin则会代表了其内部任何元素的聚焦事件。

在对输入框进行校验、实时提示、自动补全等操作时，我们经常需要用到focusin事件。下面是一个简单的示例：

//HTML
<input type="text" id="myInput">

//JavaScript
document.getElementById("myInput").addEventListener("focusin", function(){
    console.log("input focused!");
});

在输入框被聚焦时，控制台会输出“input focused!”。

二、focusing on friends 原文

focusin事件最早出现在IE和（非标准）Opera中，现在已被标准化并广泛支持。它的用途不仅限于文本框、输入框等元素，也能应用于一些特殊场景。例如，在需要拦截鼠标单击事件（click）时，可以使用focusin来代替focus。

下面是一个在文本框内部阻止鼠标单击事件的示例：

//HTML
<input type="text" id="myInput">

//JavaScript
document.getElementById("myInput").addEventListener("focusin", function(){
    document.addEventListener("click", function(e){
        e.stopPropagation();
    });
});

当鼠标单击文本框时，click事件被拦截，不会继续传播到它的祖先元素上。

三、focusing on friends 翻译

focusin的中文翻译为“聚焦”，它确实是在元素聚焦时被触发。虽然它与focus事件有些不同，但他们的适用场景有很大的重叠。有时候可以灵活地使用它们来实现同样的需求。

例如，当我们需要一个输入框被聚焦时自动显示下拉菜单时，在focusin或focus事件中均可以实现。下面是一个在focusin事件中显示下拉菜单的例子：

//HTML
<input type="text" id="myInput">

//JavaScript
document.getElementById("myInput").addEventListener("focusin", function(){
    var dropdown = document.getElementById("myDropdown");
    dropdown.style.display = "block";
});

当输入框被聚焦时，下拉菜单会出现。

四、focusing on

focusin不光可以跟特定元素相关，也可以应用于整个文档。在文档中监听focusin事件，可以全局地捕获元素聚焦事件，方便我们完成一些特殊的操作，例如目标元素没有被出现时我们想在这个元素被聚焦时跳转到另一个元素。

下面是一个在文档级别监听focusin事件的例子：

//HTML
<input type="text" id="myInput">

//JavaScript
document.addEventListener("focusin", function(e){
    var target = e.target;
    if(target.id === "myTarget"){
        // Do something when "myTarget" is focused
    }
    else {
        // Redirect focus to "myTarget"
        var myTarget = document.getElementById("myTarget");
        myTarget.focus();
    }
});

当我们聚焦与“myTarget”元素关联的输入框时，可以对其进行自由的控制。

五、focusing翻译

focusing的本义为“集中注意力”，在程序中，这个意义依然得以延伸。例如，当我们需要在一个元素被聚焦时对其进行某些操作，就需要“将注意力集中”在这个元素上。focusin提供了这个“集中注意力”的事件，可以帮助我们实现这些操作。

下面是一个在输入框聚焦时改变其样式的例子：

//HTML
<input type="text" id="myInput">

//CSS
.focused {
    border-color: red;
}

//JavaScript
document.getElementById("myInput").addEventListener("focusin", function(){
    this.classList.add("focused");
});
document.getElementById("myInput").addEventListener("focusout", function(){
    this.classList.remove("focused");
});

当输入框被聚焦时，边框的颜色会变成红色（.focused的样式），离开输入框时，恢复原来的边框颜色。

代码示例

下面是一个综合了以上几个方面的focusin事件的代码示例：

//HTML

  

    <input type="text" id="myInput">

  

  

    // Dropdown content

  

  

    <input type="text" id="myTarget">

  

//CSS
.focused {
    border-color: red;
}

//JavaScript
document.getElementById("myInput").addEventListener("focusin", function(){
    console.log("input focused!");
    var dropdown = document.getElementById("myDropdown");
    dropdown.style.display = "block";
    this.classList.add("focused");
});
document.getElementById("myInput").addEventListener("focusout", function(){
    var dropdown = document.getElementById("myDropdown");
    dropdown.style.display = "none";
    this.classList.remove("focused");
});
document.addEventListener("focusin", function(e){
    var target = e.target;
    if(target.id === "myTarget"){
        // Do something when "myTarget" is focused
    }
    else {
        // Redirect focus to "myTarget"
        var myTarget = document.getElementById("myTarget");
        myTarget.focus();
    }
});