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">
原創文章，作者：PNERD，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/331801.html