What does event binding mean?

Question

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.

Solution 1

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

Solution 2

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.

Solution 3

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.
});