JQuery Events
Often times events are triggered by the user's interaction with the webpage, for example when a button is clicked, text is entered in the text area, selection is made in selection box, key is pressed on keyboard, the pointer is moved, et cetera. Sometimes, the browser itself can trigger events, such as page load or unload.
JQuery offers event methods to enhance the basic event handling mechanism in the native browsers. Some of these methods are ready(), click(), keypress(), focus(), blur() etc.
The events that are triggered can be categorised into four main groups:
- Mouse events
- Keyboard events
- Form events
- Window events
MOUSE EVENTS
This event is fired when a user clicks some element, moves the mouse pointer etc. Some commonly used jQuery methods to handle the mouse events are listed below:
The click() Method
The click() method attaches a click event handler to a selected element, i.e. whenever a user clicks on the selected element, a specified set of instructions will be executed.
For Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("button clicked");
});
});
</script>
</head>
<body>
<button>Click Me!</button>
</body>
</html>
In the above example, a click on the <button> element will display an alert message.
The dblclick() Method
The dblclick() method attaches a doubleclick event handler to a selected element i.e. whenever a user doubleclicks on the selected element, a specified set of instructions will be executed.
For Example:
$(document).ready(function(){
$("button").dblclick(function(){
alert("button double clicked");
});
});
The above example will alert a message when the button is double-clicked.
The hover() Method
The hover() method assigns one or two event handler functions to a selected element, i.e.
it is triggered when the mouse pointer enters or leaves the selected element. The first event is executed when the user places the mouse pointer over an element,
whereas the second event is executed when the user removes the mouse pointer from that element.
For Example:
$(document).ready(function(){
$("p").hover(function(){
$('h1').text('Hovering over the element').css('color', 'red');
}, function(){
$('h1').text('Mouse is away from paragraph').css('color', 'black');
});
});
The above example will alert ‘Hovering over the element’ when you place the cursor on it, and will alert 'Mouse left!' when you remove the cursor.
The mouseenter() Method
The mouseenter() method attaches an event handler function to a selected element and is triggered when the mouse enters the element.
For Example:
$(document).ready(function(){
$("button").mouseenter(function(){
$(this).addClass("active");
$('div').text('active" class is added.');
});
});
The above example will add the class active to the <button> element when the cursor is placed on it.
The mouseleave() Method
The mouseleave() method attaches an event handler function to a selected element and is triggered when the mouse leaves the element.
For Example:
$(document).ready(function(){
$("button").mouseenter(function(){
$(this).addClass("active");
$('div').text('active" class is added.');
});
$("button").mouseleave(function(){
$(this).removeClass("active");
$('div').text('active" class is removed.');
});
});
The above example will remove the class active from the <button> element when the cursor is removed from it.
Keyboard Events
Keyboard events are triggered when the user presses or releases a key from the keyboard. Some commonly used jQuery methods to handle keyboard events are:
The keypress() Method
The keypress() method attaches an event handler function to the selected elements (usually form controls) and is triggered when the browser receives keyboard input from the user.
For Example:
$(document).ready(function(){
let keyp = 1;
$('input[type="text"]').keypress(function(){
$('p').text("Total key presses: " + keyp);
keyp += 1;
});
});
The above example will display the value of the input field when the keypress event is encountered.
The keydown() Method
The keydown() method attaches an event handler function to the selected elements (usually form controls) and is triggered when the user first presses a key on the keyboard.
For Example:
$(document).ready(function(){
$('input[type="text"]').keydown(function(event){
$('div').html(`<p>This is a keydown event of "${event.key}" key.</p>`)
});
});
The above example will display the value of input field when the keydown event is encountered.
The keyup() Method
The keyup() method attaches an event handler function to the selected elements (usually form controls) which is triggered when the user releases a key on the keyboard.
For Example:
$(document).ready(function(){
$('input[type="text"]').keyup(function(event){
$('div').html(`<p>This is a keyup event of "${event.key}" key.</p>`)
});
});
The above example will display the value of input field when the keyup event is encountered.
Form Events
A form event is triggered every time a form control receives or loses focus or when the user modifies a form control value by typing text in a text input, select any option in a select box etc.
Some commonly used jQuery methods to handle the form events are the following:
The change() Method
The jQuery change() method attaches an event handler function to the <input>, <textarea> and <select> elements and is triggered when their value changes.
For Example:
$(document).ready(function(){
$("input[type='number']").change(function(){
var x = $(this).val();
$('#output').text(`Value is : ${x}`);
});
});
In the above example, an alert message will be displayed when the value changes in the number input field.
The focus() Method
The focus() method attaches an event handler function to an HTML form field and the function is triggered when the form field gets focus.
For Example:
$(document).ready(function(){
$("input").focus(function(){
$(this).css("backgroundColor", "yellow");
});
});
In the above example, the text color of the input field will change once it gets the focus.
The blur() Method
The blur() method attaches an event handler function to an HTML form field and the function is triggered when the form field loses focus.
For Example:
$(document).ready(function(){
$("input").focus(function(){
$(this).css("backgroundColor", "yellow");
});
$("input").blur(function(){
$(this).css("backgroundColor", "white");
});
});
Document/Window Events
Certain events are triggered when the page DOM is ready or when the user resizes or scrolls the browser window, etc. Some commonly used jQuery methods to handle such kind of events are mentioned below:
The ready() Method
The ready() method specifies a function to run when the DOM is fully loaded.
For Example:
$(document).ready(function(){
alert("The DOM is loaded!");
});
The above example will alert a message as soon as the DOM hierarchy has been fully constructed and ready to be manipulated.
The resize() Method
The resize() method assigns an event handler function to the window element that is triggered whenever the browser’s window size changes.
For Example:
let count = 0;
$(document).ready(function(){
$(window).resize(function(){
$("#count").html(count += 1);
});
});
In the above example, an alert message will be displayed when resizing is tried.
The scroll() Method
The scroll() method attaches an event handler function to the scrollable iframes and elements. The function is triggered whenever the element's scroll position changes.
For Example:
let count = 0;
$(document).ready(function(){
$(window).scroll(function(){
$("#count").html(count += 1);
});
});
The above example will alert a message when the browser window is scrolled.