gpt4 book ai didi

Javascript:事件监听器中未定义 event.target.id

转载 作者:行者123 更新时间:2023-12-03 01:39:58 25 4
gpt4 key购买 nike

我正在尝试为 for 循环中的多个 div 添加事件监听器:

var divElements = document.getElementsByClassName('B');
var vMax = divElements.length;
for (var i = 0; i < vMax; i += 1) {
divElements[i].addEventListener('DOMCharacterDataModified', function(e) {
myFunc(e.target);
}, false);
}

function myFunc(elem) {
var text = elem.textContent;
var id = elem.id;
console.log("text: " + text);
console.log("id: " + id);
}

此代码的问题是,尽管 text 正常并且其中包含正确的文本,但 id 变量未定义,尽管该元素在 html 中设置了 id。这段代码可以吗还是我遗漏了什么?

我也尝试了 e.target.getAttribute("id") 但最终出现 e.target.getAttribute is not a function 错误。

最佳答案

问题在于文本节点是作为大多数元素节点的隐式子节点创建的节点。您正在尝试获取相关文本节点的父元素节点的 id,但 elem 是该节点的子节点,因此您必须访问 elem.parentNode.id.

我们可以通过检查不同节点的 nodeTypenodeName 属性来看到这一点。

来自MDN :

  • 元素节点的节点类型为1
  • 文本节点的节点类型为 3

var div = document.getElementById("A");
div.addEventListener('DOMCharacterDataModified', function(e) {
console.log("Target element is a " + e.target.nodeName + " node and has a node type of: " + e.target.nodeType);
console.log("Target element.parentNode is a " + e.target.parentNode.nodeName +
" node and has a node type of: " + e.target.parentNode.nodeType);

console.log("Target element.text: " + e.target.textContent);
console.log("Target element.parentNode.id: " + e.target.parentNode.id);
});
<h1>Click into the text below and modify it somehow:</h1>
<div id="A" contenteditable>Something</div>

关于Javascript:事件监听器中未定义 event.target.id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50897679/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com