Events are an important part of any programming language that needs to be interactive. As such, JavaScript implements a variety of different events and the handlers to go with them. For instance, JavaScript defines onclick and onmouseover events and jQuery can work with these.
What an event is
An event is the response or the trigger when something else happens. Strictly speaking, the onclick is the event. Events are basically a method of interaction in JavaScript such that when an event is fired some event handler then responds.
JavaScript allows multiple handlers to be called when an event occurs. jQuery makes it even easier than raw JavaScript to attach multiple handlers to an event.
Often attaching these handlers to events is referred to as binding them. That's because once they are bound they do not need to be referenced any longer but as a result of this, it's not possible to stop them firing on the event directly.
Binding events
Binding an event is easy with jQuery is very easy. The first step is to select all the elements that are to be given the event and then running the bind on them.
jQuery("button").on("click", function (event) { //Do something alert("Button clicked!"); });
Run the code above and click the following button:
That's all there is to binding events to elements in jQuery. It's really so easy.
Binding universal events
There are on occasion times when an event needs to be universal and that all elements current and future are affected by the binding. In this case, jQuery provides a very clever system to bind an event to a selection of elements regardless of whether or not they are on screen at the time of binding.
jQuery("#button_container button").on("click", function (event) { //Do something alert("Button clicked!"); });
By binding the event to the document, the document holds the event and the action is stored in a list of events. When an element is clicked the document's bound event is fired and allowing jQuery to lookup what action should be taken.
Run the code above and watch what happens.
Removing event handlers
So far this tutorial has covered adding event handlers to elements, but it has yet to show the jQuery way of removing event handlers.
Since jQuery has the on method, it also has the off method. This method
will remove any bound event handlers on an element and works very similarly to the
on method:
jQuery("#button_container button").off("click");
Numerous event handlers can be used with this such as dragon or hover much as
they can with the on method.
