Handling Client Events in jQuery

-

Background: 

We already discussed a few things about jQuery. Please go though my earlier posts for the basics of jQuery, jQuery selectors and Manipulating DOM using jQuery. Events are another very important aspect of jQuery. In this post we are going to discuss a few things on jQuery events.

Introduction:

In JavaScript there are events and we can write code snippet against those to perform certain action. Events are basically the response from the web page based on certain user action. There are defined event attributes for each html elements and we can use those to create our own jQuery code.

Events:

We can always call a jQuery function from one of the events of an element, and In order to do that, we can simply mention the function name in the HTML attribute of that element as shown below

<ahref="#"onclick="alert('Hello, world!');">Click</a>
<ahref="#"onclick="showHelloWorld()">Click</a>

In the above code snippet, we are writing jQuery code and that code snippet is associated by mentioning that with the onclick attribute of the element.

But, what if we want to associate a single jQuery method to be called from multiple element’s click event? Calling the onclick function in the onclick attribute will work but that is not the samertest way to do that.

The approach for this will be to bind the jQuery method with an event of selected elements. As we have already gone through different selectors in jQuery we can use that technique for this.

Let’s look at the below example:

$("div.row").bind("click", function(){
    alert(“Hello WOrld”);
});

In the above example, we are binding an anonymous function with the click event of all the “div” element which have a class “row”. We can write the above code snipper in the $.ready() event of the page to get the desired effect.

Following are different variation of doing the same thing as discussed above:

$("div.row").on("click", function(){
     alert("Hello World");
});

$("div.row").click(function(){
     alert("Hello World");
});


Like the click event there are so many events which we can use to define the response of the web page against different user action. Following are a fewcommon events which we can use:
  • click 
  • dblclick 
  • mouseenter 
  • mouseleave 
  • keypress 
  • keydown 
  • keyup 
  • submit 
  • load 
  • change 
  • resize 
  • focus 
  • scroll 
  • blur 
  • unload

Unbinding events from control:

We have already seen the way to bind a jQuery method with an event of html element. This enables to actually execute the jQuery method wherever that event occurs. In other words this enables the event to subscribe to that event. jQuery allows us to remove this subscription because that can be needed.

In order to do this, we have the unbind() event. We can unbind selective events from the selected elements or may choose to even remove all event from the selected elements.

Let’s look at the below example:
  • $("a").unbind(); // unbinds any event that are attached using the bind event 
  • $("a").unbind("click dblclick"); un-attache the click and dblclick event
Apart from the events we discussed there are many more events which we can use to customise the webpage response to user interactions. The complete list of jQuery events are here

Chaining in jQuery:

In real world applications we may need to perform multiple action, events on a single element. In order to do that, if we select the same element again and again and perform one action at a time on that, then that is definitely not a smart way to do things, we want to select the element once and perform multiple action/attach multiple events on that. One really interesting aspect of jQuery is most of the methods that jQuery provides, return jQuery object. So we can chain multiple method on selected element.

Let’s look at the Following Example:

$("#Div1").bind("click",function(){
alert("Div1 Clicked");
})
.text("Hello, world!")
.removeClass("blue")
.addClass("bold")
.css("color", "blue")
.slideUp(2000)
.slideDown(2000);

Here we have selected the div with #id selector, and performed a number of action like setting text for that div, adding and removing css class to that div also attaching event handler for click event. All these methods are performed sequentially one after another and each method performs its action on top of the output of the previous method. This is possible because each method returns the same jQuery object that is returned by the jQuery selector after performing its action.

Next:

So, we discussed on jQuery events and method chaining.Next we will see how we can do basic animations using jQuery. for my earlier posts please visit http://mondalmrinmoy.blogspot.com/

Comments

Post a Comment

Popular posts from this blog

Let's traverse through DOM Tree - Few advanced notes on jQuery Selectors

-
Background: We have already seen different jQuery selectors (see earlier post ) and used a few examples to select one/multiple Dom element(s). But what about travarsing the whole DOM tree. can we select inversely?  can we select a dropdown without knowing its value? Lets look at some of the advanced jQuery selectors and a few in-built jQuery methods that can in this regard. Vertically traversing through DOM: Think about nested DOM elements, can we get the child elements of an element after selecting an element using any of the jQuery selectors? the answer is yes. jQuery have in built methods that allows us to traverse through DOM and get child elements. To get all child elements of an element we can use .children() method, which return an array of elements that are 1st level child of that element.So .children() method does not gives those elements which are child of these 1st level elements. The .children() method allows us to pass a selector in or...
Read more

Ways to select DOM element(s) - a guide to jQuery Selectors

-
Introduction: I hope you are now familiar with the basics of jQuery. You can go through my earlier post in case you are new to jQuery, so that you are familiar with the basics and know about how it can be used and the different things we can achieve using jQuery. A very common task using jQuery is selecting DOM element to get/set value, change the element’s appearance, get/set different HTML attributes or may be associate an event with that element. Let’s look a closure look at different ways to select DOM elements. jQuery Selector: There are different ways to select DOM element(s) using jQuery. We can select element(s) using the Id, class, HTML attributes, attribute value and much more. Basically jQuery selector is based on the CSS Selectors (the way CSS selects DOM element) but it has some own custom selectors. Let’s look at some selectors along with examples. The ID selector: It uses the Id attribute of the element. As we know that id of an element is unique within the...
Read more

Handling Events in jQuery – Few Advanced Notes and Faqs

-
Background: We have already discussed about handling client events in jQuery (see earlier post ). Obviously there are more things about jQuery events like binding client events to DOM element which are created dynamically, Cancelling the action of an event conditionally etc. Let’s have a look at few advanced topics on jQuery events. Adding event handler to future elements: In my earlier post we already know about the bind() and unbind() methods provided by jQuery which is used to attach and detach event handlers to various elements on the page. Instead of bind() we can also use the click()/dblclick() methods to add different event handlers. We declare these things in the ready() event because we need that element to be loaded before we attach any event handler to that element. Since we can create DOM element dynamically, can we use this technique to attach event to the element. The answer is no, because when the dynamically created element is not yet present in the DOM when th...
Read more