CODEWITHSUNDEEP
javascriptdom-events
hguser
hguser

Reputation: 36058

Binding event to the element in JavaScript

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?

Upvotes: 3

Views: 1124

Answers (4)

Sam Dutton
Sam Dutton

Reputation: 15279

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'.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816780

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.

Upvotes: 3

Shadow Wizzard
Shadow Wizzard

Reputation: 66388

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.

Upvotes: 0

epascarello
epascarello

Reputation: 207527

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.

Upvotes: 0

Related Questions