Closest is not part of delegation. Closest is a way to traverse the dom tree to find an elements parent that matches the selector used. I think the reason this is helpful in event delegation is because some browsers may not register the click if it occurs inside of a child element of the li. For example, the source of the example
In document tree there are 2 list items, 1 of which has only a bold element inside of it while the other has a text node and a bold node. If you were using a browser which used event bubbling, I believe that clicking inside of the bold element with a normal click event linked directly to the li could actually interfere. Also, in the example this was attached to the $(document) element not the ul element. This could serve as another advantage. in your example above, there's only 1 ul that you are attaching to, but you may want to attach this to several. $(document) would be a convenient way to do this. On Jan 14, 7:03 pm, Pedram <pedram...@gmail.com> wrote: > Dear Folk , > how does the $(document).closest() work I could not understand . > > for example this is our HTML code > > <ul id="main"> > <li> a </li> > <li> > <ul> > <li> b</li> > </ul> > c > </li> > </ul> > > javascript code : > > $("#main").bind("click", function (e) { > $(e.target).closest("li").css("background","red") > > }); > > so how doesthis exactly do , how is this relate to event delegation