jQuery Events

Updated July 7, 2023

Introduction to jQuery Events

jQuery is one of the many library features created and used for javascript codes to expand the functional boundaries of javascript. The jQuery Events can be defined as any activity or click on the web page created using javascript and jquery. 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, hover() 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 triggers the clicked element, also known as the click event, which attaches 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 with the action and the trigger, which forms the function’s actual functioning; 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 attaches an event handler function to the HTML element provided. Whenever the user double-clicks on the given HTML element, the function is executed.

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 triggers a change event or the one that gets attached to the function whenever a change-related event occurs.

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 triggers the blur event or attaches a function to be run whenever a blur event occurs. This method is often used with the focus() method.

Syntax

$(selector).blur()

Example

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

5. data

This event.data property contains 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 returns a custom namespace whenever the event triggers. Plugin authors use this property to set it, allowing them to handle tasks in various ways based on the namespace used. Reserved namespaces for jQuery begin with an underscore.

Syntax

event.namespace

Example

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

7. PageX

This is the page-type property used to return the mouse pointer’s position, which is related to the left side edge of the document. This kind of property is often used during 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 used to return the mouse pointer’s position, 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 handler explicitly triggers the specific event and returns the previous or last value in the event.result property.

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. Examples of this scenario include:

Preventing a submit button from submission of a form

Prevent a link from accessing a specific 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. This is to determine if the 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 returns the number of milliseconds since January 1, 1970, corresponding to the initial triggering of the event.

Syntax

event.TimeStamp

Example

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

13. type

It monitors the triggered event and its type.

Syntax

event.type

Example:

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

14. which()

The event returns the pressed keyboard key or mouse button.

Syntax

event.which

Example

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

15. focus()

This property and the focus for this event occur when an element is used to get the focus, which occurs when selected by the mouse click or by navigating a tab onto it. The focus () method triggers the focus event or attaches 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 specifies two functions used when the mouse pointer hovers over all the selected elements. This method triggers both the mouseleave and mouseenter events. If only one function 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: You use this when the key is on its way down.
• Keypress: This happens when someone presses a key on the keyboard.
• Keyup: As the name suggests, this is used when the key on 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 the keypress event is as follows:

• 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 on 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 the keyup event is as follows:

• Keydown: It is used when the key is on its way down.
• Keypress: When someone presses a key on the keyboard, this event occurs.
• Keyup: As the name suggests, this is used when the key on 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 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. The live() method attaches all the event handlers to current and FUTURE elements by matching the selector elements, even if the script newly creates them. The die() method can destroy the live() method.

Syntax

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

Example

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

21. Load()

The load method attaches an event handler to the load-based event. The load event occurs whenever a specified. Elements such as image, frame, script, iframe, and the window object trigger the event when they associate with the URL. The load event’s triggering may depend on the browser, regardless of whether the image is cached. Moreover, jQuery includes a method called load(), which acts as an AJAX method and its behavior relies on the parameters.

Syntax

$(selector).load(function)

Example

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

22. Mousedown

The event occurs only when the user presses down the left mouse pointer button over the selected element list. You use the mousedown() method or function to trigger this event, which attaches a function and runs whenever a mousedown event happens. People often use this method in conjunction with the mouseup() method.

Syntax

$(selector).mousedown()

Example

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

23. Off()

You use this method to remove an event handler that you have attached along with the on() method. It serves as the replacement for the unbind() method, die() method, and undelegate() method. This method brings a lot of consistency to the API, and we always recommend using it as it simplifies 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 is used to attach a function that can run whenever a mouseenter-based event occurs.

Syntax

$(selector).mouseenter()

Example

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

25. mouseleave()

Whenever the mouse pointer hovers over the specified element and triggers the mouse leave event, this event occurs. Alternatively, you can use it to detach a function that executes whenever a mouse leave-based event occurs.

Syntax

$(selector).mouseleave()

Example

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

Jquery is one of the most used libraries for front-end development. This provides unique features and a broad range of functions that helps make the lives of developers and people easy and convenient. I hope you liked our article. Stay tuned to our blog for more like these.

Recommended Articles

We hope that this EDUCBA information on “jQuery Events” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

1. jQuery Effects
2. Install Jquery
3. jQuery Methods
4. jQuery Attributes