textNode addEventListener [英] textNode addEventListener

问题描述

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

Why can I not add a event listener to the text node itself instead of the p element?

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

当我点击childNode时，chrome中没有任何事情发生。

When I click on childNode nothing happens in chrome

推荐答案

文本节点根本不会触发大多数事件：历史上，元素有责任在HTML DOM中执行此操作。然而，文本节点确实触发了一些事件（IE中除外<= 8）： DOM突变事件。对于文本节点特别有用的是 DOMCharacterDataModified ，它用于检测文本节点文本的更改，并且可用于基于浏览器的编辑器。

Text nodes simply don't fire most events: historically, elements have had the responsibility for doing that in HTML DOMs. However, text nodes do fire some events (except in IE <= 8): DOM mutation events. A particularly useful one for text nodes is DOMCharacterDataModified, which is used to detect change to a text node's text and can be useful in browser-based editors.

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

HTML：

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

JavaScript：

JavaScript:

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

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

这篇关于textNode addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！