Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • jQuery - Get Started
  • What is jQuery
  • jQuery - Environment Setup
  • Start using jQuery
  • jQuery - Selectors
  • jQuery - Methods
  • DOM Manipulation
  • Attributes Manipulation
  • Dimensions Manipulation
  • Traversing Elements
  • CSS Manipulation
  • Animation
  • Events
  • AJAX Introduction
  • AJAX Methods
  • Get Method
  • Post Method
  • Load Method
  • Selector Reference
  • DOM Manipulation Methods
  • Traversing Methods
  • Effects Methods
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

jQuery Events

You will learn about jQuery events in this section.

In most web applications, the user does some action to perform an operation. For example, user clicks on save button to save the edited data in a web page. Here, clicking on the button is a user's action, which triggers click event and click event handler (function) saves data.

Event

jQuery Event Methods

The jQuery library provides methods to handle DOM events. Most jQuery methods correspond to native DOM events.

The following table lists all jQuery methods and corresponding DOM events.

CategoryjQuery MethodDOM Event
Form eventsbluronblur
changeonchange
focusonfocus
focusinonfocusin
selectonselect
submitonsubmit
Keyboard eventskeydownonkeydown
keypressonkeypress
keyuponkeyup
focusout
Mouse eventsclickonclick
dblclickondblclick
focusout
hover
mousedownonmousedown
mouseenteronmouseenter
mouseleaveonmouseleave
mousemoveonmousemove
mouseoutonmouseout
mouseoveronmouseover
mouseuponmouseup
Toggle
Browser eventsErroronerror()
Resizeonresize
Scrollonscroll
Document loadingLoadonload
Ready
Unloadonunload

Event Handling

To handle DOM events using jQuery methods, first get the reference of DOM element(s) using jQuery selector and invoke appropriate jQuery event method.

The following example shows how to handle button click event.

Example:Handle Button Click Event
$('#saveBtn').click(function () {
    alert('Save button clicked');
});

<input type="button" value="Save" id="saveBtn" />
Try it

In the above example, we first use id selector to get a reference of 'Save' button and then call click method. We have specified handler function as a callback function, which will be called whenever click event of Save button is triggered.

Event Object

jQuery passes an event object to every event handler function. The event object includes important properties and methods for cross-browser consistency e.g. target, pageX, pageY, relatedTarget etc.

Example: jQuery Event Object
$('#saveBtn').click(function (eventObj) {
    alert('X =' + eventObj.pageX + ', Y =' + eventObj.pageY);
});

<input type="button" value="Save" id="saveBtn" />
Try it

this Keyword in Event Handler

this keyword in an event handler represents a DOM element which raised an event.

Example: this in Event Handler
$(':button').click(function (eventObj) {
    alert(this.value + ' ' + this.type + ' clicked');
});

<input type="button" value="Save" id="saveBtn" />
<input type="button" value="Delete" id="delBtn" />
<input type="button" value="Clear" id="clearBtn" />
Try it

Hover Events

jQuery provides various methods for mouse hover events e.g. mouseenter, mouseleave, mousemove, mouseover, mouseout and mouseup.

Example: Hover Events
$('#myDiv').mouseenter(function (data) {
            $(this).css('background-color','green');
        });

$('#myDiv').mouseleave(function (data) {
            $(this).css('background-color','red');
        });
       
<div id="myDiv" style={{Width: '100px', Height: '100px'}}>
</div>
Try it

You can use hover() method instead of handling mouseenter and mouseleave events separately.

Example: hover() Method
$('#myDiv').hover(function () {
        $(this).css('background-color','green');         
    },
    function () {
        $(this).css('background-color','red');
    });

<div id="myDiv" style={{Width: '100px', Height: '100px'}}>
</div>
Try it

Event Binding using on()

jQuery allows you to attach an event handler for one or more events to the selected elements using on method.

Internally all of the shorthand methods uses on() method. The on() method gives you more flexibility in event binding.

Syntax:
on(types, selector, data, fn )
  • Types = One or more space-separated event types and optional namespaces
  • Selector = selector string
  • Data = data to be passed to the handler in event.data when an event is triggered.
  • Fn = A function to execute when the event is triggered.
Example: Event Binding using on
$('#saveBtn').on('click',function () {
    alert('Save Button clicked');
});

<input type="button" value="Save" id="saveBtn" />
Try it

You can use selector to filter the descendants of the selected elements that trigger the event.

Example: Event Binding using on
$('#myDiv').on('click',':button', function () {
    alert('Button clicked');
});

<div id="myDiv" >
    <input type="button" value="Save" id="saveBtn" />

    <input type="button" value="Add" id="addBtn" />
</div>

<input type="button" value="Delete" id="delBtn" />
Try it

In the above example, we specify ':button' selector. So click event triggered by buttons in <div> tag whose id is myDiv, will only be handled.

Binding Multiple Events

You can also specify multiple event types separated by space.

Example: Multiple Events Binding
$( 'myDiv' ).on('mouseenter mouseleave', function() {
    $(this).text('The mouse entered or left from the div' );
});

<div id="myDiv" style={{Width: '100px', Height: '100px'}}>
</div>
Try it

Specify Named Function as Event Handler

You can create separate functions and specify that as a handler. This is useful if you want to use the same handler for different events or events on different elements.

Example:Binding Named Function to Event
var mouseHandler = function() {
    alert( "The mouse entered" );
};

$('#myDiv').on('mouseenter', mouseHandler);

<div id="myDiv" style={{Width: '100px', Height: '100px'}}>
</div>
Try it

jQuery on() method is replacement of live() and delegate() method.

Event Bubbling

The following example demonstrates event bubbling in jQuery.

Example:Event Bubbling
$('div').click(function (event) {
    alert( event.target.tagName + ' clicked');
});

<div>
    <p>
        <span>This is span.</span>
    </p>
</div>
Try it

As you can see in the above example, we have handled click event of <div> element in jQuery. So if you click on div, it will display alert message 'DIV clicked'. However, if you click on span, still it will popup alert message SPAN clicked even though we have not handled click event of <span>. This is called event bubbling. Event bubbles up to the documentlevel in DOM hierarchy till it finds it.

The following figure illustrates event bubbling.

jQuery Event Bubbling

Visit event methods reference to know about all the event methods in jQuery.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.