I'm trying to figure out if there is any way to listen to events like focus or change of an HTML element with contenteditable attribute.

I have this html markup:

<p id=test contenteditable >Hello World</p>

I've tried these without any success(JSBin):

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);

I don't want to listen to keyboard or mouse events. I didn't find any clear documentation in W3C and MDN about contenteditable.

Is it possible to listen to change and focus or other events on a content editable HTML element?