具有子节点的元素的Javascript委托

Question

In a simple example , I try to make delegate for first-level children of an element. The problem comes when the child elements have children. The mouse event consider the clicked element (regardless of level).

My solution is to cycle until reaching the first-level child; but I wonder if this is the best method to do so.

Isn't there a method for directly returning the first-level children upon delegate click?

JS

window.onload=function(){
document.getElementById('test').addEventListener('click', function(e){
console.log(e.target);alert(e.target.id);
   }, false);
}

HTML

<div id="test">
<a href="#" id="first">First</a>
<a href="#" id="second"><b>Second</b></a>
<a href="#" id="third">Third</a>
<a href="#" id="fourth">Fourth</a>
<div id="div">Division</div>
<div id="div2"><span>Division</span></div>
</div>

Answer 1

If it's only the first level elements you're after, you could check if the parentNode of the clicked element is the root, no further traversing needed. Otherwise you'll need to traverse up to the first child of the root. Something like:

// level0 is the root
level0.addEventListener('click', function(e) {
    var from = e.target || e.srcElement;
    from = from.parentNode === level0 ? from : findFirst(level0,from);
    /** do things **/
}, false);

// traverse up to first child of [root] 
function findFirst(root,el){
  while(true){
   el = el.parentNode;
   if (el && el.parentNode === root){
     return el;
   }
  }
  return null;  
}

Here is a fork of your jsfiddle , using the above.

Answer 2

I'm not sure what's beeing ask here. Events do Bubble by default (which is actually not true, by default they would traverse top->down) because its most common to call .addEventListener with false as third argument.

You can stop most events from further bubbling up, by calling eventObject.stopPropagation() on the node where you want to stop it.

If you want to "prefilter" only the first-level children, you shouldn't use delegation at all, but query with .querySelectorAll like

[].forEach.call( document.querySelectorAll('#test > *'), function( node ) {
    node.addEventListener('click', function( event ) {
        alert( this.id );
    }, false);
});

That would bind click event listeners on all direct children from #test .

See that in action: http://jsfiddle.net/8Xmn4/

Answer 3

using only javascript you can use a recursive function that will find the first parent element with an id:

function findParentWithId(element){
    if(element.id){
        return element;
    }

    return findParentWithId(element.parentNode);
}

​and then, use it with the target element of the event

document.getElementById('test').addEventListener('click', function(e){
    console.log(findParentWithId(e.target));alert(findParentWithId(e.target).id);
}, false);

Answer 4

Getting a reference to all first level children of a node is simple:

window.onload=function(){
    document.getElementById('test').addEventListener('click', function(e){
        return document.getElementById('test').children;
    }, false);
}

this outputs, on Firebug format:

[a#first #, a#second #, a#third #, a#fourth #, div#div, div#div]

Obviously, it returns the children with their respective children, but the first level reference remains.

Answer 5

jQuery(':first-child') use this jquery to get the first child