Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Which jQuery events do not bubble?
Some of the jQuery events do not bubble up through the DOM hierarchy, such as mouseenter and mouseleave. Unlike bubbling events that propagate from child elements to their parent elements, non-bubbling events only trigger on the specific element where the event occurs.
Non-Bubbling jQuery Events
The main jQuery events that do not bubble include ?
-
mouseenter? Fires when the mouse pointer enters an element -
mouseleave? Fires when the mouse pointer leaves an element -
focus? Fires when an element receives focus -
blur? Fires when an element loses focus -
load? Fires when content is loaded -
unload? Fires when content is unloaded
Example
You can try to run the following code to learn how to work with jQuery events that do not bubble ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "red");
});
$("p").mouseleave(function(){
$("p").css("background-color", "blue");
});
});
</script>
</head>
<body>
<div style="padding: 20px; border: 2px solid black;">
<p style="padding: 10px; margin: 10px; border: 1px solid gray;">Demo Text - Keep the mouse pointer here.</p>
</div>
</body>
</html>
In this example, the mouseenter and mouseleave events are attached only to the paragraph element. These events do not bubble up to the parent div element, ensuring precise control over when the background color changes occur.
Conclusion
Understanding non-bubbling events like mouseenter and mouseleave helps create more precise event handling in jQuery applications, as they only trigger on the target element without propagating to parent elements.
197 Views
