textNode addEventListener

Question

为什么我不能将事件监听器添加到文本节点本身而不是p元素？

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

当我点击childNode时,chrome中没有任何反应

Answer 1

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

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

Answer 2

文本节点根本不会触发大多数事件:历史上,元素有责任在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);