16

What does event binding mean? I always come across this word whenever I search around the internet and whatever I try to look for the meaning, it's still vague to me @_@ A while ago, while reading some blogs regarding JavaScript I see people using this sacred word that I cannot grasp.

Rei
  • 761
  • 1
  • 7
  • 17
  • 4
    It is (misleading) jargon for attaching a listener to an element so that it is called when a related event causes the element's handler to respond. – RobG Jun 13 '11 at 12:20
  • 1
    I believe event listener is also a more appropriate term as it seems related to it, just quite a bit confusing as there are topics that refer to terms that are overused / broad. Thanks!! – Rei Jun 13 '11 at 12:35

4 Answers4

20

Event binding refers to telling the browser that a particular function should be called whenever some 'event' occurs. Events mostly relate to user input, such as clicks.

An example of binding to an event in jQuery can be the following:

$("#elem").bind("click", function() {
    alert("Clicked!");
});

This binds a function to click event of DOM object with identifier elem. When user clicks it, an alert (message box) will be shown. Binding is done by invoking the jQuery bind function but there are other means to do that, (e.g. jQuery click function in case of binding to click event).

Xion
  • 22,400
  • 10
  • 55
  • 79
  • Many thanks!! I hope this is the answer as I always read things that have broad terms and they come in different instances. I oftentimes relate binding to like "grouping" of some sort of scope. – Rei Jun 13 '11 at 12:50
  • 1
    So what is the difference between using `.bind` and `.on`? Don't they both do the same thing? Are both of these called binding? – J82 Jan 22 '15 at 04:41
  • 1
    `.on` is newer and somewhat more powerful API for event binding. For one, it supports the so-called _event delegation_, enabling you to attach a handler to an element in order to respond to event happening to its children. This is typically clearer and more efficient with many repeated elements (e.g. items on a list), especially if they are added/deleted. – Xion Jan 24 '15 at 04:12
14

When you bind something to an event, it will be triggered when the event is fired. It's like gluing a fog horn to the brake pedal on your car.

Tak
  • 11,428
  • 5
  • 29
  • 48
5

When you perform an action on a web page, it will trigger an event. This might be something like:

  • Click a button
  • Select a value from a drop down
  • Hover the mouse over an item

These events can be captured in your JavaScript code.

A common (and often misguided) way of capturing events is to do so on the HTML element itself (as shown in the onclick attribute below)

<input id="MyButton" type="button" value="clickme" onclick="Somefunction()" />

So, when the user clicks the button, the SomeFunction function will be executed.

However, it is considered a better approach to adopt a technique called 'late-binding'. This ensures that your HTML and JavaScript are kept completely separate.

So, we can modify the above exmample like so:

document.getElementById("MyButton").onclick = function(){
   //functionality here.
}

jQuery makes this even easier:

$("#MyButton").click(function(){
    //functionality here.
});
ajarianaka
  • 38
  • 1
  • 6
James Wiseman
  • 29,946
  • 17
  • 95
  • 158
  • Inline event handlers aren't "misguided". They are a reasonable option in certain circumstances. – RobG Jun 13 '11 at 12:22
  • I believe there are also some rare instances that we need to make use of the onclick attribute. But thank you for your input regarding late-binding. Appreciate it! :O) – Rei Jun 13 '11 at 12:43
  • 1
    @RobG - I didn't say is was always misguided, just 'often'. :-) Personally, I never use them and haven't encountered a circumstance where i have to. The argument against them (and for 'Unobtrusive JavaScript') is well established. Feel free to check out http://www.quirksmode.org/js/events_early.html, http://www.digital-web.com/articles/separating_behavior_and_structure_2/, http://www.alistapart.com/articles/behavioralseparation. You can also try googling 'Unobtrusive JavaScript' to see what comes back. – James Wiseman Jun 13 '11 at 12:50
  • @RobG, @Rei: You got me curious. I've asked another question regarding this: http://stackoverflow.com/questions/6330771/are-there-any-cases-where-you-have-to-use-early-binding-inline-event-attribute-in – James Wiseman Jun 13 '11 at 13:05
  • @RobG what are certain circumstances? – Raynos Jun 13 '11 at 13:55
  • Using server code to attach inline listeners at the same time as the HTML itself is generated (and often cached or held as static HTML) is much more efficeint than generating the HTML, sending it to the client, then attaching listeners based on the vaguaries of client scripting. The logic is exactly the same, just done in a different place. – RobG Jun 14 '11 at 01:36
  • @RobG "much more efficient". Your assuming that the browsers parsing of `onclick` attributes in the DOM is free. If there is a difference between using `document.addEventListener` and `onclick` attributes then it's a micro optimising that I don't care about. I value seperation of concerns more. The main problem with `onclick` attributes is that the event handlers _have to be in global scope_ which is just scope pollution. – Raynos Jun 14 '11 at 07:15
0

Binding in JS, is to capture some events (like focus, click, onmouseover, etc) and perform some other stuff before the actual process starts.

Detailed explanation:

http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/

http://api.jquery.com/bind/

Community
  • 1
  • 1
Rakesh Sankar
  • 9,337
  • 4
  • 41
  • 66