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

Question

我正在尝试为 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 错误。

Answer 1

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

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

来自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>