Binding event to the element in JavaScript

Question

Generally, when I want to bind some event to an element, I will bind the event to the element directly. For example, I want to bind the click event to the "li" element:

<ul id="ul_list">
  <li class="t">xxxx</li>
  <li class="t">xxxx</li>
  .....
</ul>

var lis=document.getElementById("ul_list").children();
for(var i=0;i<lis.length;i++){
  lis[i].onclick=function(){
    console.info(this.innerHTML);
  }
}

It works.

But in some open source code, I find that people prefer to bind the event to the parent element:

document.onclick=function(e){
 e=e==null?:window.event:e;
 var target=e.target; //the browser is not considered here
 if(target.className=='t' && target.localName='LI'){
  console.info(target.innerHTML);
 }
}

I wonder which is better?

Also, when handling drag events, people bind the mousemove event to the whole document. Why?

+1 good question. i suspect this might be something to do with compatibility with mobile devices, where click is tap. — Ruslan
– Ruslan, Commented Aug 24, 2011 at 14:13

Felix Kling · Accepted Answer · 2011-08-24 14:30:55Z

people prefer to bind the event to the parent element

This is referred to as event delegation and is especially useful when you want to trigger the same event handler for multiple elements. Instead of binding an event handler to each those elements, you bind it to a common ancestor and then check from which element the event originated. This works, because events bubble up the DOM tree.

I wonder which is better?

It depends, both approaches have their pros and cons.

Event delegation can be slower, as the event has to bubble up first. You also might have to perform DOM traversal because the event might not originate at the element you test for. For instance, in your example, the li elements might have other children, lets say an a element. To find out whether the clicked a element is a descendant of one of the lis, you have to traverse the ancestors and test them.

On the other hand, binding the handler directly is faster in the sense that the event is processed directly at the element. But if you bind a lot of event handlers and don't do it properly (like in your example) you use more memory than you actually need. Older browsers (I think especially IE) might also perform worse if there are many event handlers.

Also,sometime when handle the drag effect,people always bind the mousemove event to the whole document,why?

The problem is that while dragging an element, the mouse often moves faster than the element and leaves it. If you bind the mousemove event only to the dragged element, whenever the cursor leaves the element, the movement would stop. To avoid this, the event handler is bound to the whole document (for the duration of the dragging) so that the movement is smoothly.

epascarello · Accepted Answer · 2011-08-24 14:14:52Z

0

Linking to the parent means you are adding one event handler instead of multiple. That is a boost for performance in your application! Also if you add new elements to the page, you do not have to worry about binding them.

Only time when that model is a bad design is when you need to cancel the event. For example, you have links in the li and you need to prevent them from doing their default action.

answered Aug 24, 2011 at 14:14

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

user447356 · Accepted Answer · 2011-08-24 14:15:12Z

0

In case of click event, it's better to bind directly to the affected elements, no point binding to everything - why do you need to have your function trigger when you click something that is totally not relevant to you?

It can be useful when the elements are spread over the document and hard to "collect" them, e.g. when they only have the same class - getElementsByClassName is not very efficient in pure JavaScript as you need to iterate over all the elements, so in such case it's better to trigger the function always and check what has been clicked.

answered Aug 24, 2011 at 14:15

user447356

Comments

Sam Dutton · Accepted Answer · 2011-08-24 17:07:41Z

0

Bind handlers to the most specific event and element possible.

Note that (just to be pedantic!) you bind a handler to an event for an element, not 'bind some event to an element'.

answered Aug 24, 2011 at 17:07

Sam Dutton

15.3k6 gold badges62 silver badges65 bronze badges

Collectives™ on Stack Overflow

Binding event to the element in JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related