Question

I am trying to use event delegation inside a containing div tag set to contenteditable. For focus and keypress events the event is captured by the element with the contenteditable set to true. I want the element that the event happened on to be returned. Is there anyway for the event to register on the element you are actually working on without attaching events to each one, or setting every element to contenteditable=”true”?
If you click on any of the element d1 it returns element top not d1.

<div id="top" contenteditable="true">
<div id="d1">Edit</div>
<div id="d2">Edit</div>
<div id="d3">Edit</div>
</div>

window.onload=function(){
document.getElementById('top').addEventListener('focus',function(e){
  console.log(e.target);
},true);
}

Answer 1

I don’t know how to do this in pure js, but I know it can be done in jQuery using .closest()

Even if you don’t want to use jQuery, you may search for how it works. Good luck!

Edit:

I’ve just tested the code here in Opera… Don’t know if it’s a bug, tough… But using to ‘click’ instead of ‘focus’ make it correctly get the id of the inner div

Take a look:

<script type="text/javascript">
window.onload = function(){
  document.getElementById('top').addEventListener('click',function(e){
    alert(e.srcElement.id); //this alert d1 to d3
  },true);
document.getElementById('top').addEventListener('focus',function(e){
    alert(e.srcElement.id); //this alert top
  },true);
}
</script>

<div id="top" contenteditable="true">
      <div id="d1">Edit</div>
      <div id="d2">Edit</div>
      <div id="d3">Edit</div>
</div>