About Lesson
Event Handling with jQuery
Event Listeners
Basic Events
- .click(): Triggered when an element is clicked.
- .hover(): Triggered when the mouse enters and leaves an element.
- .dblclick(): Triggered on a double click.
JavaScript
$("#button").click(function () {
alert("Button clicked!");
});
$("#box").hover(
function () {
$(this).css("background-color", "lightblue");
},
function () {
$(this).css("background-color", "white");
}
);
$("#button").dblclick(function () {
$(this).text("Double-clicked!");
});
Using .on() to Handle Events
- .on(): Used to bind events dynamically to existing or future elements.
JavaScript
$(document).on("click", ".dynamic-button", function () {
alert("Dynamic button clicked!");
});