为什么不能直接向文本节点添加事件监听器,而是要向其所属的p元素添加?
<p>childNode</p>
...
p.childNodes[0].addEventListener('click',function(){alert('ok')},false)
当我在Chrome中点击childNode时,没有任何反应。
为什么不能直接向文本节点添加事件监听器,而是要向其所属的p元素添加?
<p>childNode</p>
...
p.childNodes[0].addEventListener('click',function(){alert('ok')},false)
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);
文本节点只是普通的“节点”实例,根据DOM规范,它们不能具有事件监听器。这不会违反自然法则,但这就是DOM的工作方式。
更正:显然(感谢Jens),它们可以具有监听器,但大多数事件(包括常见的“单击”事件)不会在文本节点上触发。
DOMCharacterDataModified
已被弃用,因此您应该继续使用MutationObserver
。我会更新我的答案。 - Tim Down