js怎么判断触发了焦点

一、JS 如何判断触发了焦点

通过事件监听器、使用 focus 和 blur 事件、结合 activeElement 属性。可以使用事件监听器来监控元素的焦点变化，结合 focus 和 blur 事件可以在元素获得或失去焦点时执行特定的代码。activeElement 属性则可以用于查询当前获得焦点的元素。使用事件监听器是常用的实践之一，下面我们将详细介绍这种方法。

事件监听器是一种强大的工具，可以在特定事件发生时执行定义好的函数。通过在需要监控的元素上添加 focus 和 blur 事件监听器，我们可以准确捕捉到元素焦点的变化，并执行相应的逻辑处理。

二、焦点事件基础

1、焦点与失焦事件

在 JavaScript 中，焦点事件包括 focus 和 blur。focus 事件在元素获得焦点时触发，blur 事件在元素失去焦点时触发。通常，这些事件应用于表单控件，如 <input>、<textarea> 和 <select> 元素。

document.getElementById("myInput").addEventListener("focus", function() {
    console.log("Input has gained focus");
});
document.getElementById("myInput").addEventListener("blur", function() {
    console.log("Input has lost focus");
});

2、事件冒泡与捕获

focus 和 blur 事件默认不冒泡，即事件不会从子元素传递到父元素。但可以使用 focusin 和 focusout 事件，这些事件会冒泡，因此可以在父元素上监听子元素的焦点变化。

document.getElementById("parent").addEventListener("focusin", function() {
    console.log("A child element has gained focus");
});
document.getElementById("parent").addEventListener("focusout", function() {
    console.log("A child element has lost focus");
});

三、使用事件监听器

1、添加事件监听器

可以在页面加载时，为需要监控的元素添加 focus 和 blur 事件监听器。事件监听器会在元素获得或失去焦点时，执行指定的函数。

window.addEventListener('DOMContentLoaded', (event) => {
    const inputElement = document.getElementById("myInput");
    inputElement.addEventListener("focus", function() {
        console.log("Input has gained focus");
    });
    inputElement.addEventListener("blur", function() {
        console.log("Input has lost focus");
    });
});

2、移除事件监听器

在某些情况下，可能需要动态移除事件监听器。可以使用 removeEventListener 方法来实现。

const inputElement = document.getElementById("myInput");
function handleFocus() {
    console.log("Input has gained focus");
}
function handleBlur() {
    console.log("Input has lost focus");
}
inputElement.addEventListener("focus", handleFocus);
inputElement.addEventListener("blur", handleBlur);
// To remove the event listeners
inputElement.removeEventListener("focus", handleFocus);
inputElement.removeEventListener("blur", handleBlur);

四、使用 activeElement 属性

1、检查当前焦点元素

可以使用 document.activeElement 属性来检查当前获得焦点的元素。activeElement 属性返回当前获得焦点的元素，如果没有元素获得焦点，则返回 body 元素。

document.addEventListener("click", function() {
    const focusedElement = document.activeElement;
    console.log("Current focused element:", focusedElement);
});

2、结合事件监听器使用

可以结合事件监听器和 activeElement 属性，来实现更复杂的焦点监控逻辑。

document.addEventListener("focusin", function() {
    const focusedElement = document.activeElement;
    console.log("Focused element:", focusedElement);
});
document.addEventListener("focusout", function() {
    const focusedElement = document.activeElement;
    console.log("No element is focused");
});

五、使用 setTimeout 和 setInterval

1、定时检查焦点

可以使用 setTimeout 或 setInterval 方法，定时检查当前获得焦点的元素。虽然这种方法不如事件监听器高效，但在某些情况下可能会有所帮助。

setInterval(function() {
    const focusedElement = document.activeElement;
    console.log("Focused element:", focusedElement);
}, 1000);

2、配合其他逻辑使用

可以将定时检查焦点的方法，与其他逻辑结合使用，以实现特定的功能。

setInterval(function() {
    const focusedElement = document.activeElement;
    if (focusedElement.tagName === "INPUT") {
        console.log("An input element is focused");
    } else {
        console.log("No input element is focused");
    }
}, 1000);

六、实战案例：表单验证

1、实时验证输入

通过事件监听器，可以实现实时表单验证。每当用户在输入框中输入内容时，可以触发验证逻辑。

const emailInput = document.getElementById("email");
emailInput.addEventListener("input", function() {
    const emailValue = emailInput.value;
    if (validateEmail(emailValue)) {
        emailInput.classList.remove("invalid");
        emailInput.classList.add("valid");
    } else {
        emailInput.classList.remove("valid");
        emailInput.classList.add("invalid");
    }
});
function validateEmail(email) {
    const re = /^[^s@]+@[^s@]+.[^s@]+$/;
    return re.test(email);
}

2、提交时验证

在表单提交时，也可以使用焦点事件来验证输入内容是否符合要求。如果不符合要求，可以阻止表单提交，并显示错误消息。

const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
    const emailInput = document.getElementById("email");
    if (!validateEmail(emailInput.value)) {
        event.preventDefault();
        alert("Please enter a valid email address");
    }
});
function validateEmail(email) {
    const re = /^[^s@]+@[^s@]+.[^s@]+$/;
    return re.test(email);
}

七、总结

通过本文的讲解，我们了解了如何通过 事件监听器、使用 focus 和 blur 事件、结合 activeElement 属性 来判断元素是否触发了焦点。这些方法不仅可以帮助我们实现基本的焦点监控，还可以用于更复杂的应用场景，如表单验证、动态样式切换等。希望这些内容能够帮助你在实际项目中更加高效地处理焦点事件。