Published on: 25 January, 2016

Event Handling in JQuery

Posted by andy | 1032 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus
Event Handling in JQuery

So what actually an event? An event can be considered as a result of an action triggered by a process which can be a process clicking of a user or when a page is loading.

In javascript, when we want to add an event to a button, we will need to use a function named addEventListener to attach an event. Please see the following example for more details.

Let says we have the following button in our page.

<p><input type="button" value="Click Me" id="btnAction"/></p>
var btn = document.getElementById("btnAction");
var eventListener = function (event) {
    alert("You have clicked me");
	event.preventDefault();
};
btn.addEventListener("click", eventListener, false);
While in JQuery, you can easily attach an event by using the following code.
$("#btnAction").click(function(event){
	alert("You have clicked me");
	event.preventDefault();
});

Alternatively in JQuery, you can use the following keyword on as well.

$("#btnAction").on("click", function(event){
	alert("You have clicked me");
	event.preventDefault();
});

So how to remove an event handler we just created from JQuery, it is pretty simple. Either you can use the keyword .off or unbind.

$("#btnAction").off("click");

// or you can use the following option
$("#btnAction").unbind("click");
The following code below is how to remove the handler using javascript.

Attaching multiple events in JQuery

Attaching multiple events in JQuery is quite simple, you can wrap the function attached separated by comma like below.

$("#btnAction").on("mouseenter", function() {
    alert("Hovering over");
}).on("mouseleave", function() {
   alert("Hovering out");
});
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 22 March, 2016
In this tutorial, you will learn how to create a category menu list using css and JQuery framework. You will also learn on how to automatically place an arrow into the LI element if it founds there is a sub menu list. The placement of the arrow is done via JQuery, this includes binding the event onclick on the LI element as well to expand and collapse the sub menu list.