文本节点添加事件监听器

Question

为什么不能直接向文本节点添加事件监听器，而是要向其所属的p元素添加？

<p>childNode</p>
...
p.childNodes[0].addEventListener('click',function(){alert('ok')},false)

当我在Chrome中点击childNode时，没有任何反应。

- Gert Cuykens

Answer 1

2021年4月更新

DOM突变事件如DOMCharacterDataModified现已弃用，应改用MutationObserver。

原始回答

文本节点通常不会触发大多数事件：在HTML DOM中，元素一直负责执行这一任务。但是，文本节点确实会触发某些事件（除了IE <= 8）：DOM突变事件。对于文本节点来说，特别有用的是DOMCharacterDataModified，它用于检测文本节点的文本是否发生更改，并且在基于浏览器的编辑器中非常有用。

示例：http://www.jsfiddle.net/timdown/c6dHX/

HTML:

<div contenteditable="true" id="div">A text node, edit me</div>

JavaScript:

var textNode = document.getElementById("div").firstChild;

textNode.addEventListener("DOMCharacterDataModified", function(evt) {
    alert("Text changed from '" + evt.prevValue + "' to '" + evt.newValue + "'");
}, false);

- Tim Down

---

我目前正在使用MutationObservers，但普通事件似乎生成更干净的代码。它是否已被弃用或者我仍然可以使用DOMCharacterDataModified？ - Eduardo Poço

@EduardoPoço：DOM变异事件，如DOMCharacterDataModified已被弃用，因此您应该继续使用MutationObserver。我会更新我的答案。 - Tim Down

Answer 2

文本节点只是普通的“节点”实例，根据DOM规范，它们不能具有事件监听器。这不会违反自然法则，但这就是DOM的工作方式。

更正：显然（感谢Jens），它们可以具有监听器，但大多数事件（包括常见的“单击”事件）不会在文本节点上触发。

- Pointy

---

这不是真的。类型层次结构是Text <: CharacterData <: Node <: EventTarget。因此，Text具有方法addEventListener。但是，它不会触发click（或大多数其他）事件。 - Jens