Event handling with the DOM in Javascript

What is event handling? Event handling lets you create dynamic and interactive websites. When a user clicks on a button, hovers over an icon or submits a form this information is captured in the DOM. Using event handling in javascript, you can customize the user experience on your website based on the actions taken.

Event Handling using query selector

Using querySelector is a popular way of adding event listeners.

Listening to a click

   
                        function logHello(){
                            console.log('hello world');
                        }

                        // create event handler
                        document.querySelector('#form').addEventListener('click',logHello)
                       

We have created a function `logHello` that logs `hello world` whenever a user click on the element with id of 'form`. The click type event listener will call the `logHello` function when the user click on the form element.