title: Listening to events of a  contenteditable HTML element
body: <p>I'm trying to figure out if there is any way to listen to events like <code>focus</code> or <code>change</code> of an HTML element with <code>contenteditable</code> attribute.</p>
  
  <p>I have this html markup:</p>
  
  <pre><code>&lt;p id="test" contenteditable &gt;Hello World&lt;/p&gt;
  </code></pre>
  
  <p>I've tried these without any success(<a href="http://jsbin.com/upidak/edit#javascript,html,live" rel="noreferrer">JSBin</a>):</p>
  
  <pre><code>var test = document.querySelector('#test');
  test.addEventListener('change', function(){
    alert('content edited');
  }, false);
  test.addEventListener('DOMCharacterDataModified', function(){
    alert('content edited');
  }, false);
  test.addEventListener('focus', function(){
    alert('content edited');
  }, false);
  </code></pre>
  
  <p>I don't want to listen to keyboard or mouse events. I didn't find any clear documentation in <a href="http://www.w3.org/TR/html5/editing.html#contenteditable" rel="noreferrer"><strong>W3C</strong></a> and <a href="https://developer.mozilla.org/en/HTML/Content_Editable" rel="noreferrer"><strong>MDN</strong></a> about <code>contenteditable</code>.</p>
  
  <p>Is it possible to listen to <code>change</code> and <code>focus</code> or other events on a content editable HTML element?</p>