{"id":1925,"date":"2023-08-26T03:38:10","date_gmt":"2023-08-26T03:38:10","guid":{"rendered":"https:\/\/easycodingschool.com\/?p=1925"},"modified":"2023-08-26T03:38:10","modified_gmt":"2023-08-26T03:38:10","slug":"javascript-events-and-event-handling","status":"publish","type":"post","link":"https:\/\/easycodingschool.com\/blog\/javascript-events-and-event-handling\/","title":{"rendered":"Javascript Events and Event Handling"},"content":{"rendered":"

Events<\/h3>\n

In web development, events are actions or occurrences that happen in the browser. Examples of events include clicking a button, submitting a form, pressing a key, resizing the browser window, etc. These events are generated by users or the browser itself.<\/p>\n

Event Handling<\/h3>\n

Event handling is the process of defining specific actions or behaviors that should occur in response to a particular event. In other words, it’s how you make your web application respond to user interactions or other events.<\/p>\n

Event Listeners<\/h3>\n

Event listeners are functions that “listen” for specific events on specific HTML elements and execute a given piece of code (a callback function) when that event occurs. Event listeners allow you to attach interactivity to your web pages.<\/p>\n

Here’s an example of attaching an event listener to a button element in JavaScript:<\/p>\n

\n
const button = document.querySelector('#myButton');\r\n\r\nbutton.addEventListener('click', function() {\r\nalert('Button clicked!');\r\n});<\/code><\/pre>\n<\/div>\n
In this example, when the button with the ID myButton<\/strong> is clicked, the provided callback function will be executed, displaying an alert.<\/p>\n
Event Propagation and Delegation:<\/h2>\n
Event Propagation:<\/h3>\n
When an event occurs on an element in the DOM (Document Object Model), it doesn’t just affect that element. It goes through a process called event propagation, which involves two<\/strong> phases: capturing phase<\/strong> and bubbling phase<\/strong>.<\/p>\n
Capturing Phase: <\/strong>The event starts from the root of the DOM and travels down to the target element. This is less commonly used in practice.<\/p>\n
Bubbling Phase:<\/strong> After the event reaches the target element, it “bubbles” up through its parent elements all the way to the root of the DOM.<\/p>\n
Event Delegation:<\/h3>\n
Event delegation is a technique that takes advantage of event propagation. Instead of attaching event listeners to individual elements, you attach a single event listener to a common ancestor of multiple elements you’re interested in. This way, you can respond to events on multiple elements using a single listener.<\/p>\n
Benefits of event delegation:<\/strong><\/p>\n