当鼠标焦点在标签上时，如何获取标签的名称及其ID？

Question

我想要一个函数来在焦点位于标签中时显示标签的名称和 ID。
例如，
焦点在 ID 为 1th 的输入上，显示 input 和 1th 以及 console.log.
焦点在 id 为 2th 的 textarea 上，显示 textarea 和 2th 以及 console.log.

ob = window.document.getElementsByTag("");
function getNameAndId(event){
    console.log(tag's name and id);
}
ob.addEventListener("focus",getNameAndId);

 
content:<input id="1th" type="text">
<br/>
content:<textarea id="2th" cols=6 rows=5></textarea>
<br/>
content:<input id="3th" type="text">
<br/>
content:<input id="4th" type="text">

在我的演示中，我不知道如何定义ob

ob = window.document.getElementsByTag("");

当焦点在标签上时，如何显示标签的名称和 ID？

console.log(tag's name and id);

Answer 1

首先你可以找到活动元素id。

var activeElementId = document.activeElement.id;

然后，您可以像这样获取标签名称。

var ob = document.getElementById(activeElementId).tagName;

终于

console.log("tag's name: " + ob + ", activeElementId: " + activeElementId);

Answer 2

您可以选择将其包装到更具可扩展性的包装器中..

<html>
<head>
    <script>
            window.addEventListener("focusin", (event)=> {
                if (event && event.target) {
                    console.log(`ID = ${event.target.getAttribute("id")}`);
                    console.log(`NAME = ${event.target.tagName}`);
                }
            });
    </script>
</head>
<body>
    <input id="hello" style="border: 1px solid #000; padding: 20px;">
</body>

Answer 3

你可以在这里使用委托。在使用捕获时将事件侦听器分配给父元素（例如 body）（由作为第三个参数传递给 addEventListener 的 true 指示）。然后用event.target得到元素：

function getNameAndId(event) {
    var target = event.target;
    console.log("Tag: " + target.tagName);
    console.log("Id: " + target.id);
}
document.body.addEventListener("focus", getNameAndId, true);

 
content:<input id="1th" type="text">
<br/>
content:<textarea id="2th" cols=6 rows=5></textarea>
<br/>
content:<input id="3th" type="text">
<br/>
content:<input id="4th" type="text">

注意： 这将捕获 body 内所有可聚焦元素的焦点事件。您可以通过指定 body 之外的另一个近亲或通过检查 tagName 以仅接受特定元素类型来缩小范围。

当鼠标焦点在标签上时，如何获取标签的名称及其ID？

How to get the tag's name and its id when mouse's focus is on it?

javascript

events

focus