jQuery Events

Introduction to jQuery Events

JQuery is one of the many library features that is created and used for javascript codes, in order to expand the functional boundaries of javascript. The jQuery Events can be defined as any activity or even a click that is made on the web page created using javascript and jQueries. A few of the commonly observed events in javascript jQuery are the Click() event, Dblclick() event, change() event, blur() event, PageX, PageY, data, namespace, result, preventDefault() event, Event.target(), type, timeStamp, which() event, focus() event, hovet() event, keydown() event, keypress() event, keyup() event, live() event, load() event, off() event and mousedown.

Events and Syntax of jQuery

Here are the following events of jQuery with syntax given below

1. Click()

This event occurs whenever the element is clicked. This click() method is used to trigger the clicked element also known as the click event which is used to attach to a function whenever a click related event occurs.

Syntax

$(selector).click()

When you wish to attach a function to this click event,

$(selector).click(function)

The next step always comes along with the action and the trigger which forms the actual working and functioning of the function and therefore whenever the event gets fired, a function should be passed to the event.

Example

$("p").click(function(){
// action which is triggered goes here!! });

2. Dblclick()

This method is used to attach an event handler function to the HTML element provided. This function is executed whenever the user doubles click on the given HTML element.

Syntax

 $(selector).dblclick()

Example

$("p").dblclick(function(){
$(this).hide();
});

3. change()

This event occurs whenever the value of a particular element is changed i.e. it only works for the input, textarea, and selected elements. The change() method is used to trigger change event or the one which gets attached to the function whenever a change related event has to occur.

Syntax

$(selector).change()

Example

$("input").change(function(){
alert("This text related to this has been changed.");
});

4. blur()

This event-related to blur occurs only when the element loses focus. The blur() method which is used to trigger the blur event or the one which is used to attach a function to be run whenever a blur event occurs. This method is used often with the focus() method.

Syntax

$(selector).blur()

Example

$("input").blur(function(){
alert("The field has lost its focus.");
});

5. data

This event.data property is used to contain the optional passed data related to an event method when the executing handler for the current is bound.

Syntax

event.data

Example

$("p").each(function(i){
$(this).on("click", {x:i}, function(event){
alert("This index + ". paragraph has data: " + event.data.x);
});
});

6. namespace

This property is used to return custom namespace whenever the event is triggered. The property is used to be set by plugin authors which can be used to handle tasks very differently which depends on the namespace which is used. The namespaces which have their beginning with the underscore are reserved namespaces for JQuery.

Syntax

event.namespace

Example

$("p").on("custom.someNamespace", function(event){
alert(event.namespace);
});

7. PageX

This is the page type property which is used to return the position of the mouse pointer which is related to the left side edge of the document. This kind of property is often used with the event. PageY property.

Syntax

event.PageX

Example

$(document).mousemove(function(event){
$("span text ").text("X: " + event.pageX);
});

8. PageY

This is the page type property which is used to return the position of the mouse pointer which is related to the top hand side edge of the document. This kind of property is often used with the event. PageX property.

Syntax

event.PageY

Example

$(document).mousemove(function(event){
$("span text ").text("Y: " + event.pageY);
});

9. result

The event.result property is used to contain the previous or the last value which is returned by the event handler which is specifically triggered by the specific event.

Syntax

event.result

Example

$("button").click(function(){
return "Hi there!";
});

10. preventDefault()

This event-related event.preventDefault() method is used to stop the default action of a particular element from happening. The examples of this scenario include:

Preventing of a submit button from submission of a form

Prevent a link from accessing a particular URL.

A particular event such as event.preventDefault() is used to check whether the preventDefault() method or function is used to call the event.

Syntax

event.preventDefault()

Example

$("a").click(function(event){
event.preventDefault();
});

11. Event.target()

This property is used to return which DOM element is to be triggered by this event. It is most often than not useful to compare the event.target to this to be done to determine if the particular event is being handled due to an event called bubbling.

Syntax

event.target

Example

$("p, button, h2").click(function(event){
$("div").html("Hi, triggered is " + event.target.NameNode + "  new element.");
});

12. timeStamp

This property is used to return the number of milliseconds since the time of January 1, 1970, which corresponds to the first time when the event was first actually triggered.

Syntax

event.TimeStamp

Example

$("button").click(function(event){
$("span").text(event.timeStamp);
});

13. type

This is used to monitor the event and its type which is triggered.

Syntax

event.type

Example:

$("p").on("click dblclick and mouse related events", function(event){
$("div").html("Event: " + event.type);
});

14. which()

This property is used to return the keyboard key or mouse button which was pressed for the event.

Syntax

event.which

Example

$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});

15. focus()

This property and the focus for this event occurs when an element is used to get the focus which occurs when it is selected by the mouse click or by navigating a tab onto it. The focus () method is used to trigger the focus event or attach a function to run when a focus related event occurs.

Syntax

$(selector).focus()

Example

$("input").focus(function(){
$("span").css("display", "inline").fadeOut(200);
});

16. hover()

This hover method is used to specify two functions used to run when the mouse pointer hovers over all the elements which are selected. This method triggers both the mouseleave and mouseenter events. If there is only one function which is specified, it will run for both the mouseleave and mouseenter events.

Syntax

$(selector).hover(inFunction,outFunction)

Example

$("p").hover(function(){
$(this).css("background-color", "blank");
}, function(){
$(this).css("background-color", "yellow");
});

17. keydown()

The order of the events which are related to keydown event are:

• Keydown: This is used when the key is on its way down.
• Keypress: This occurs when the key of the keyboard is pressed
• Keyup: As the name suggests, this is used when the key of the upward side is pressed.

Syntax

$(selector).keydown()

Example

$("input").keydown(function(){
$("input").css("background-color", "black");
});

18. keypress()

The order of the events which are related to keypress event is:

• Keydown: This is used when the key is on its way down.
• Keypress: This occurs when the key of the keyboard is pressed
• Keyup: As the name suggests, this is used when the key of the upward side is pressed.

Syntax

$(selector).keypress()

Example

$("input").keypress (function(){
$("input").css("background-color", "black");
});

19. keyup()

The order of the events which are related to keyup event is:

• Keydown: This is used when the key is on its way down.
• Keypress: This occurs when the key of the keyboard is pressed
• Keyup: As the name suggests, this is used when the key of the upward side is pressed.

Syntax

$(selector).keyup()

Example

$("input").keyup(function(){
$("input").css("background-color", "black");
});

20. Live()

This lives () method or function of the jquery is used to attach one or more event-based handlers to be used particularly for the selected lists of elements and it also specifies the function to be run where the events occur. All the event handlers are attached using the live() method which will work for both current and FUTURE elements which are based on matching the selector elements which can be like a new element created by the script. The die() method can be used to destroy the live() method.

Syntax

$(selector).live(event,data,function)

Example

$("button").live("click", function(){
$("p").slideToggle();
});

21. Load()

The load method is used to attach an event handler to the load based event. The load event occurs whenever a specified This event occurs and works whenever the elements associated with the URL such as image, frame, script, iframe and the window object. The load event may or may not trigger and it depends on the browser even if the image is cached. There is also an AJAX method which is a jquery method known as load(), the one which is called depends on the parameters.

Syntax

$(selector).load(function)

Example

$("img").load(function(){
alert("stuff loaded.");
});

22. Mousedown

This event occurs only when the left mouse pointer button is pressed down over the selected list of the element. The mousedown () method or function is used to trigger this event which attaches a function and it runs whenever a mousedown event happens. This method is often used together along with with the mouseup() method.

Syntax

$(selector).mousedown()

Example

$("div").mousedown(function(){
$(this).after("Down button pressed with mouse.");
});

23. Off()

This method is used to remove an event handler which is attached along with the on() method. It can be said to be the replacement of the unbind() method, die() method and undelegate() method. This method is used to bring in a lot of consistency to the API and it is always recommended to make use of this method as this is used to simplify the Jquery code base.

Syntax

$(selector).off(event,selector,function(eventObj),map)

Example

$("button").click(function(){
$("p").off("click");
});

24. mouseenter()

This event occurs whenever the mouse pointer is over the element specified and enters as it triggers the mouseenter event or it is used to attach a function that can be used to run whenever a mouseenter based event occurs.

Syntax

$(selector).mouseenter()

Example

$("p").mouseenter(function(){
$("p").css("background-color", "black");
});

25. mouseleave()

This event occurs whenever the mouse pointer is over the element specified and leaves as it triggers the mouse leaves event or it is used to deattach a function that can be used to run whenever a mouseleave based event occurs.

Syntax

$(selector).mouseleave()

Example

$("p").mouseleave(function(){
$("p").css("background-color", "black");
});

Jquery is one of the most used libraries when it comes to front end development. This provides unique features and a broad range of functions which helps in making the lives of developers and people all-around easy and convenient. Hope you liked our article. Stay tuned to our blog for more like these.

Recommended Articles

This is a guide to jQuery Events. Here we discuss the list of the most common and frequently used various events of jQuery with Syntax and examples. You may also have a look at the following articles to learn more –

1. jQuery Effects
2. jQuery Methods
3.  jQuery Attributes
4. How to Install Jquery?
5. Top 8  jQuery Selectors with Code Implementation
6. Learn the JQuery Progress Bar Examples
7. Guide to Different JavaScript Events
8. Guide to jQuery delegate( )
9. Complete Overview of jQuery keydown()
10. Guide to Examples of jQuery load()
11. Examples of jQuery Slidetoggle()
12. Examples to Implement jQuery toggle()
13. Complete Guide to jQuery bind()
14. jQuery mousedown | Top 6
15. jQuery hide() | Syntax | Code | Examples