Event Delegation in JavaScript | The Complete JavaScript Course | Ep.67
Starter Code: https://github.com/procodrr/javascript-course/tree/main/ep-67_event-delegation/starter-code
Final Code: https://github.com/procodrr/javascript-course/tree/main/ep-67_event-delegation/final-code
JavaScript Repo: https://github.com/procodrr/javascript-course
Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp
Have any doubts? Join this Telegram group and ask your question. You can also share the projects that you make in this group.
Telegram Group : https://t.me/procodrr
Sunday QnA Link: https://meet.google.com/vbp-hqnm-eiq
00:00 Event delegation optimizes code for better performance.
02:10 Adding and removing event listeners on elements.
05:42 Event delegation reduces the number of event listeners on the page.
08:29 Understanding event delegation in JavaScript
11:36 Event delegation helps optimize memory usage and page load by applying event listeners on parent elements.
14:49 Getting ready to apply JavaScript knowledge practically by building projects
16:45 JavaScript projects require understanding of core concepts like promises, callbacks, classes, and inheritance.
Social Media
🌐 Telegram: https://t.me/procodrr
🌐 Linkedin: https://www.linkedin.com/in/anurag-singh-web-developer/
🌐 Instagram: https://www.instagram.com/procodrr/
🌐 Twitter: https://twitter.com/anuragsinghbam
🌐 Portfolio: https://anuragsinghbam.com/
Music by geoffharvey from Pixabay
About the course
JavaScript is the most popular and versatile programming language in the world. You can build almost anything using JavaScript. Mobile apps like Facebook, Instagram, Discord, they all are made using JavaScript. Desktop apps like VS Code, Atom, Microsoft Teams, WhatsApp, Slack, are also made using JavaScript itself.
No programming knowledge is required at all to follow this course. In this course we will learn JavaScript from absolute zero level to advanced level. You can follow this course while learning HTML and CSS as well.
By the end of this course you’ll become a JavaScript expert which will help you land your dream job of web development.
If you have any doubt you can ask in comment section I will reply to each and every question or you can reach out to me directly on my social media handles mentioned below.
Lessons
- The Complete JavaScript Course | Trailer | Zero to Advanced
- The Complete JavaScript Course | Trailer | Zero to Advanced
- ProCodrr JavaScript Course Review
- Story of JavaScript | JavaScript History | The Complete JavaScript Course | Ep.01
- Introduction to JavaScript | The Complete JavaScript Course | Ep.02
- How to Practice JavaScript Questions Topic-wise?
- Story of JavaScript | JavaScript History | The Complete JavaScript Course | Ep.01
- Data Types in JavaScript | Primitive Data Types Explained | The Complete JavaScript Course | Ep.03
- Introduction to JavaScript | The Complete JavaScript Course | Ep.02
- JavaScript Variables Explained in Depth | let, const, var | The Complete JavaScript Course | Ep.04
- Data Types in JavaScript | Primitive Data Types Explained | The Complete JavaScript Course | Ep.03
- Watch Your Code Running Line by Line in Dev Tools | The Complete JavaScript Course | Ep.05
- JavaScript Variables Explained in Depth | let, const, var | The Complete JavaScript Course | Ep.04
- Dialog Boxes in JavaScript | Alert, Confirm, & Prompt | The Complete JavaScript Course | Ep.06
- Watch Your Code Running Line by Line in Dev Tools | The Complete JavaScript Course | Ep.05
- Template Literals | String Methods & Properties | The Complete JavaScript Course | Ep.07
- Dialog Boxes in JavaScript | Alert, Confirm, & Prompt | The Complete JavaScript Course | Ep.06
- Math Object in JavaScript | The Complete JavaScript Course | Ep.08
- Template Literals | String Methods & Properties | The Complete JavaScript Course | Ep.07
- Most Used Concept in JavaScript | Truthy and Falsy Values | The Complete JavaScript Course | Ep.09
- Math Object in JavaScript | The Complete JavaScript Course | Ep.08
- Comparison Operators in JavaScript Explained in Hindi | The Complete JavaScript Course | Ep.10
- Most Used Concept in JavaScript | Truthy and Falsy Values | The Complete JavaScript Course | Ep.09
- Logical Operators in JavaScript | And, Or, Not, Operators | The Complete JavaScript Course | Ep.11
- Decision Making in JavaScript Using IF Statement | The Complete JavaScript Course | Ep.12
- Comparison Operators in JavaScript Explained in Hindi | The Complete JavaScript Course | Ep.10
- Logical Operators in JavaScript | And, Or, Not, Operators | The Complete JavaScript Course | Ep.11
- Optimize Decision Making Using Else If and Else | The Complete JavaScript Course | Ep.13
- Nested IF ELSE Statement in JavaScript | The Complete JavaScript Course | Ep.14
- Decision Making in JavaScript Using IF Statement | The Complete JavaScript Course | Ep.12
- Optimize Decision Making Using Else If and Else | The Complete JavaScript Course | Ep.13
- Switch Statement in JavaScript | Switch Case | The Complete JavaScript Course | Ep.15
- Ternary Operator Explained in Hindi | The Complete JavaScript Course | Ep.16
- Nested IF ELSE Statement in JavaScript | The Complete JavaScript Course | Ep.14
- Switch Statement in JavaScript | Switch Case | The Complete JavaScript Course | Ep.15
- How to See Variable Address in Dev Tools? | Memory Location | The Complete JavaScript Course | Ep.17
- Objects in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.18
- Ternary Operator Explained in Hindi | The Complete JavaScript Course | Ep.16
- Object.freeze( ) vs Object.seal( ) in JavaScript | The Complete JavaScript Course | Ep.19
- How to See Variable Address in Dev Tools? | Memory Location | The Complete JavaScript Course | Ep.17
- Objects in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.18
- Arrays Explained in Depth | The Complete JavaScript Course | Ep.20
- Object.freeze( ) vs Object.seal( ) in JavaScript | The Complete JavaScript Course | Ep.19
- Most Common Array Methods in JavaScript | The Complete JavaScript Course | Ep.21
- Arrays Explained in Depth | The Complete JavaScript Course | Ep.20
- Multidimensional Arrays are Easier Than You Might Think | The Complete JavaScript Course | Ep.22
- Right Way to Copy Objects and Arrays | Deep Vs Shallow Copy | The Complete JavaScript Course | Ep.23
- Most Common Array Methods in JavaScript | The Complete JavaScript Course | Ep.21
- Combined Assignment Operators in JS | Increment and Decrement Operator | Ep.24
- Multidimensional Arrays are Easier Than You Might Think | The Complete JavaScript Course | Ep.22
- While Loop in JavaScript | Explained in Depth | The Complete JavaScript Course | Ep.25
- Right Way to Copy Objects and Arrays | Deep Vs Shallow Copy | The Complete JavaScript Course | Ep.23
- Combined Assignment Operators in JS | Increment and Decrement Operator | Ep.24
- For Loop in JavaScript | The Complete JavaScript Course | Ep.26
- While Loop in JavaScript | Explained in Depth | The Complete JavaScript Course | Ep.25
- Do While Loop in JavaScript | The Complete JavaScript Course | Ep.27
- For Loop in JavaScript | The Complete JavaScript Course | Ep.26
- Introduction to Functions | The Complete JavaScript Course | Ep.28
- Do While Loop in JavaScript | The Complete JavaScript Course | Ep.27
- Return Keyword in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.29
- Introduction to Functions | The Complete JavaScript Course | Ep.28
- Execution Context in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.30
- Call Stack in JavaScript | The Complete JavaScript Course | Ep.31
- Return Keyword in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.29
- Execution Context in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.30
- What is Hoisting? | Most Asked JS Interview Question | The Complete JavaScript Course | Ep.32
- Call Stack in JavaScript | The Complete JavaScript Course | Ep.31
- Global Scope vs Local Scope in Javascript | The Complete JavaScript Course | Ep.33
- Lexical and Block Scope Explained in Depth | The Complete JavaScript Course | Ep.34
- What is Hoisting? | Most Asked JS Interview Question | The Complete JavaScript Course | Ep.32
- Global Scope vs Local Scope in Javascript | The Complete JavaScript Course | Ep.33
- Higher Order Functions and Callbacks in JavaScript | The Complete JavaScript Course | Ep.35
- setTimeout and setInterval in JavaScript | The Complete JavaScript Course | Ep. 36
- Lexical and Block Scope Explained in Depth | The Complete JavaScript Course | Ep.34
- Higher Order Functions and Callbacks in JavaScript | The Complete JavaScript Course | Ep.35
- Event Loop and Callback Queue in JavaScript | The Complete JavaScript Course | Ep.37
- setTimeout and setInterval in JavaScript | The Complete JavaScript Course | Ep. 36
- Returning Functions with Closures in JavaScript | The Complete JavaScript Course | Ep.38
- Event Loop and Callback Queue in JavaScript | The Complete JavaScript Course | Ep.37
- Difference between Methods and Functions in JavaScript | The Complete JavaScript Course | Ep.39
- Returning Functions with Closures in JavaScript | The Complete JavaScript Course | Ep.38
- Arrow Functions in JavaScript | ES6 | The Complete JavaScript Course | Ep.40
- Difference between Methods and Functions in JavaScript | The Complete JavaScript Course | Ep.39
- for of vs for in Loop in JavaScript | ES6 | The Complete JavaScript Course | Ep.41
- forEach Array Method in JavaScript | The Complete JavaScript Course | Ep.42
- Arrow Functions in JavaScript | ES6 | The Complete JavaScript Course | Ep.40
- for of vs for in Loop in JavaScript | ES6 | The Complete JavaScript Course | Ep.41
- Map, Filter, Reduce in JavaScript | The Complete JavaScript Course | Ep.43
- Some and Every Array Method in JavaScript | The Complete JavaScript Course | Ep.44
- forEach Array Method in JavaScript | The Complete JavaScript Course | Ep.42
- Map, Filter, Reduce in JavaScript | The Complete JavaScript Course | Ep.43
- Arguments Keyword in JavaScript | The Complete JavaScript Course | Ep.45
- Default Parameters in JavaScript | ES6 | The Complete JavaScript Course | Ep.46
- Some and Every Array Method in JavaScript | The Complete JavaScript Course | Ep.44
- Arguments Keyword in JavaScript | The Complete JavaScript Course | Ep.45
- Spread Operator | The Complete JavaScript Course | Ep.47
- Default Parameters in JavaScript | ES6 | The Complete JavaScript Course | Ep.46
- Rest Parameters in JavaScript | The Complete JavaScript Course | Ep.48
- Destructuring in JavaScript | The Complete JavaScript Course | Ep.49
- Spread Operator | The Complete JavaScript Course | Ep.47
- What is BOM in JavaScript? | Window Object | The Complete JavaScript Course | Ep.50
- Rest Parameters in JavaScript | The Complete JavaScript Course | Ep.48
- Destructuring in JavaScript | The Complete JavaScript Course | Ep.49
- Introduction to DOM | Document Object Model | The Complete JavaScript Course | Ep.51
- Selecting Elements in JavaScript | DOM Manipulation | The Complete JavaScript Course | Ep.52
- What is BOM in JavaScript? | Window Object | The Complete JavaScript Course | Ep.50
- Difference between innerText and textContent in JavaScript | The Complete JavaScript Course | Ep.53
- Introduction to DOM | Document Object Model | The Complete JavaScript Course | Ep.51
- getAttribute and setAttribute in JavaScript | The Complete JavaScript Course | Ep.54
- Selecting Elements in JavaScript | DOM Manipulation | The Complete JavaScript Course | Ep.52
- Difference between innerText and textContent in JavaScript | The Complete JavaScript Course | Ep.53
- How to apply styles in JavaScript | The Complete JavaScript Course | Ep.55
- getAttribute and setAttribute in JavaScript | The Complete JavaScript Course | Ep.54
- Access Parent Sibling & Children Elements using JavaScript | The Complete JavaScript Course | Ep.56
- How to apply styles in JavaScript | The Complete JavaScript Course | Ep.55
- What is the Difference Between Element and Node? | The Complete JavaScript Course | Ep.57
- Access Parent Sibling & Children Elements using JavaScript | The Complete JavaScript Course | Ep.56
- What is the difference between append and appendChild? | The Complete JavaScript Course | Ep.58
- Creating Elements in JavaScript | The Complete JavaScript Course | Ep.59
- What is the Difference Between Element and Node? | The Complete JavaScript Course | Ep.57
- What is the difference between append and appendChild? | The Complete JavaScript Course | Ep.58
- How to remove element using Javascript ? | The Complete JavaScript Course | Ep.60
- Creating Elements in JavaScript | The Complete JavaScript Course | Ep.59
- Event Listeners Explained in Depth | The Complete JavaScript Course | Ep.61
- How to remove element using Javascript ? | The Complete JavaScript Course | Ep.60
- Form Event and Event Object in JavaScript | The Complete JavaScript Course | Ep.62
- Event Listeners Explained in Depth | The Complete JavaScript Course | Ep.61
- Keyboard events in JavaScript | The Complete JavaScript Course | Ep.63
- Mouse Events in JavaScript | The Complete JavaScript Course | Ep.64
- Form Event and Event Object in JavaScript | The Complete JavaScript Course | Ep.62
- Event Bubbling and Event Capturing in JavaScript | The Complete JavaScript Course | Ep.65
- Keyboard events in JavaScript | The Complete JavaScript Course | Ep.63
- Event Simulation in JavaScript | The Complete JavaScript Course | Ep.66
- Mouse Events in JavaScript | The Complete JavaScript Course | Ep.64
- Event Bubbling and Event Capturing in JavaScript | The Complete JavaScript Course | Ep.65
- Event Delegation in JavaScript | The Complete JavaScript Course | Ep.67
- Your First JavaScript Project | Focus on Today | Part 1 | JavaScript Projects | Ep.01
- Event Simulation in JavaScript | The Complete JavaScript Course | Ep.66
- Local Storage Explained in Depth | The Complete JavaScript Course | Ep.68
- Event Delegation in JavaScript | The Complete JavaScript Course | Ep.67
- Your First JavaScript Project | Focus on Today | Part 1 | JavaScript Projects | Ep.01
- Your First JavaScript Project Completed | Part 2 | JavaScript Projects | Ep.02
- Local Storage Explained in Depth | The Complete JavaScript Course | Ep.68
- Foodie Hamburger Project | How to make Hamburger Menu? | JavaScript Projects | Ep.03
- How to Create Popup Using JavaScript in Hindi | JavaScript Projects | Ep.04
- Your First JavaScript Project Completed | Part 2 | JavaScript Projects | Ep.02
- Foodie Hamburger Project | How to make Hamburger Menu? | JavaScript Projects | Ep.03
- FREE Figma Design | Quiz App Challenge | JavaScript Projects | Ep.05
- What is API? Talking to the Outside World Using JSON | The Complete JavaScript Course | Ep.69
- How to Create Popup Using JavaScript in Hindi | JavaScript Projects | Ep.04
- FREE Figma Design | Quiz App Challenge | JavaScript Projects | Ep.05
- What is XMLHttpRequest? | The Complete JavaScript Course | Ep.70
- Synchronous vs Asynchronous Javascript | The Complete JavaScript Course | Ep.71
- What is API? Talking to the Outside World Using JSON | The Complete JavaScript Course | Ep.69
- Callback Hell in JavaScript | The Complete JavaScript Course | Ep.72
- What is XMLHttpRequest? | The Complete JavaScript Course | Ep.70
- Synchronous vs Asynchronous Javascript | The Complete JavaScript Course | Ep.71
- Promises Explained in Depth | The Complete JavaScript Course | Ep.73
- Callback Hell in JavaScript | The Complete JavaScript Course | Ep.72
- Let's Fix the Callback Hell using Promises | The Complete JavaScript Course | Ep.74
- Promises Explained in Depth | The Complete JavaScript Course | Ep.73
- Introducing Fetch API | Better than XHR | The Complete JavaScript Course | Ep.75
- Async Await Explained Like Never Before | The Complete JavaScript Course | Ep.76
- Let's Fix the Callback Hell using Promises | The Complete JavaScript Course | Ep.74
- Introducing Fetch API | Better than XHR | The Complete JavaScript Course | Ep.75
- Try and Catch Block in JavaScript | The Complete JavaScript Course | Ep.77
- Async Await Explained Like Never Before | The Complete JavaScript Course | Ep.76
- Optional Chaining in JavaScript | The Complete JavaScript Course | Ep.78
- Import and Export in JavaScript | ES6 Modules | The Complete JavaScript Course | Ep.79
- Try and Catch Block in JavaScript | The Complete JavaScript Course | Ep.77
- Optional Chaining in JavaScript | The Complete JavaScript Course | Ep.78
- Frontend Mentor REST Countries API Project | Part - 1 | JavaScript Projects | Ep.06
- [COMPLETED] Frontend Mentor REST Countries API Project | Part - 2 | JavaScript Projects | Ep.07
- Import and Export in JavaScript | ES6 Modules | The Complete JavaScript Course | Ep.79
- OOPs (Encapsulation & Abstraction) and Factory Functions | The Complete JavaScript Course | Ep.80
- Frontend Mentor REST Countries API Project | Part - 1 | JavaScript Projects | Ep.06
- Constructor Function and new Keyword | The Complete JavaScript Course | Ep.81
- [COMPLETED] Frontend Mentor REST Countries API Project | Part - 2 | JavaScript Projects | Ep.07
- Classes in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.82
- OOPs (Encapsulation & Abstraction) and Factory Functions | The Complete JavaScript Course | Ep.80
- Constructor Function and new Keyword | The Complete JavaScript Course | Ep.81
- Private and Public Fields in Class | The Complete JavaScript Course | Ep.83
- Static Properties And Methods on Classes | The Complete JavaScript Course | Ep.84
- Classes in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.82
- Private and Public Fields in Class | The Complete JavaScript Course | Ep.83
- Getters and Setters in JavaScript | The Complete JavaScript Course | Ep.85
- Static Properties And Methods on Classes | The Complete JavaScript Course | Ep.84
- Prototypal Inheritance | Extends and Super Keyword in JS | The Complete JavaScript Course | Ep.86
- Demystifying THIS Keyword in JavaScript | The Complete JavaScript Course | Ep.87
- Getters and Setters in JavaScript | The Complete JavaScript Course | Ep.85
- Mastering JavaScript Dates: Part 1 - Understanding Time Zones, UTC, GMT, ISO, Unix Time, and Epoch
- Prototypal Inheritance | Extends and Super Keyword in JS | The Complete JavaScript Course | Ep.86
- Mastering JavaScript Dates: Part 2 - Understanding Set Methods with Project
- Demystifying THIS Keyword in JavaScript | The Complete JavaScript Course | Ep.87
- Mastering JavaScript Dates: Part 1 - Understanding Time Zones, UTC, GMT, ISO, Unix Time, and Epoch
- Congratulations🎉 We have Successfully Completed JavaScript | The Complete JavaScript Course
- Mastering JavaScript Dates: Part 2 - Understanding Set Methods with Project
- Congratulations🎉 We have Successfully Completed JavaScript | The Complete JavaScript Course