Introducing the DOM

Inline Events

Lecture 259 goes into some detail about the onclick and ondblclick events, which are very rarely implemented inline using HTML.

Lecture 261 is about the onclick property. We create a button (along with a unique JS script) which calls a function. The function will print a humorous message to the console (although you will need to inspect the page to see it). We're the onclick property for the message, and just look at how we use the onmouseenter property too!

addEventListener

This is a generic method that allows us to call a specific preset function whenever a specified event (such as a click, dblclick, scroll, or keydown) is 'delivered to the target'.

  • In JavaScript, we use: 
                            
                            addEventListener(type, listener)
                            addEventListener(type, listener, options)
                            addEventListener(type, listener, useCapture)
  • A listener is the object that receives a notification when an event of a specified type occurs.
  • The type is a case-sensitive string representing the event type to listen for
  • Here, we've set up the following: 
                            
                            const btn3 = document.querySelector('#v3');
                            btn3.addEventListener('click', function () {
                            alert("CLICKED!");
                        })
  • In this example, we're able to use addEventListener() to enable TWO OR MORE callback functions to be called for the same event. Here, we can call twist() and shout() simultaneously upon clicking a button of id v3!
    •                         
                            function twist(){
                                console.log("TWIST!");
                            }
                            
                            function shout(){
                                console.log("SHOUT");
                            }
                            
                            //If we do this then the LAST one ALONE is called...i.e. only shout will display
                            //tasButton.onclick = twist;
                            //tasButton.onclick = shout;
                            
                            //With addEventListener(), BOTH are called!
                            const tasButton = document.querySelector('#tas');
                            tasButton.addEventListener('click',twist);
                            tasButton.addEventListener('click',shout);
  • There are also multiple different options that can be used with addEventListener(). The option once means the listener will be invoked at most once after being added. If true, the listener would be automatically removed when invoked.
  • There's also a companion call removeEventListener(), which is useful in more complex applications!