Event Delegation in jQuery

Simple Event Binding:

$( "p" ).on( "click", function() {
console.log( "was clicked" );
});

Many Events but only one Event handler:

$('div').on('mouseenter mouseleave', function() {
console.log('mouse hovered over or left a div');
});

Many Events and Handlers:

$( "div" ).on({
mouseenter: function() {
console.log( "hovered over a div" );
},
mouseleave: function() {
console.log( "mouse left a div" );
},
click: function() {
console.log( "clicked on a div" );
}
});

Event Delegation:

$( "body" ).on( "click", "p", function() {
alert( $( this ).text() );
});

The article was originally published at MicroPyramid blog.

--

--

--

Python, Django, Android and IOS, reactjs, react-native, AWS, Salesforce consulting & development company

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Hey! JavaScript Learner, It’s time to improve your Interview Experience

String split() method with simple Example

arrow function in webpack4

How to Create HTML Charts Using Chart.js and Google Sheets

Serving Single Page Applications from Azure with Blob Storage (and making it work when you refresh…

Are You rejected from the interview? Don’t Worry. Prepare Yourself 😃— JavaScript

DS with JS — Stacks & Queues

About Rest ASSURED

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
MicroPyramid

MicroPyramid

Python, Django, Android and IOS, reactjs, react-native, AWS, Salesforce consulting & development company

More from Medium

Get started with JavaScript, MongoDB and GitHub

JavaScript: Some Cool Console Methods in 2022.

Basics of S.O.L.I.D Principles, Javascript, Git, and NoSQL

More About JavaScript, Version Controlling, NoSQL