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)

When I click on childNode nothing happens in chrome

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)

When I click on childNode nothing happens in chrome

• javascript
• google-chrome

2 Answers 2

April 2021 Update

DOM mutation events such as DOMCharacterDataModified are now deprecated, and MutationObservers should be used instead.

Original answer

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.

Example: http://www.jsfiddle.net/timdown/c6dHX/

document.getElementById("div")
.firstChild.addEventListener(
 "DOMCharacterDataModified",
 function(evt) {
  console.log(
   "Text changed from '"
   + evt.prevValue
   + "' to '"
   + evt.newValue
  );
}, false);

<div contenteditable id="div">Edit me.</div>

Text nodes are just plain "Node" instances, and according to the DOM specs they just can't have event listeners. It's not something that would violate natural law, but it's just not the way the DOM works.

Correction: apparently (thank you Jens) they can have listeners, but most events (including common ones like "click") are not fired on text nodes.