DOM and JavaScript can handle numerous event types. We will discuss a few different types of events here. As you continue your studies of the DOM and events, you may find these two reference links helpful.
load Event¶The DOM includes the load event, which is triggered when the window, elements, and resources have been loaded by the browser. Why is it important to know when things have loaded? Remember you can't interact with HTML elements in JavaScript unless they have been loaded into the DOM.
Previously, we were moving the <script> element below any HTML elements that we needed
to reference in the DOM. Using the load event on the global variable window is an
alternative to <script> placement. When the load event has triggered on the window as
a whole, we can know that all the elements are ready to be used.
Example
A <script> tag is in <header> and all DOM code is inside load event handler.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Window Load Event</title>
5 <script>
6 // add load event handler to window
7 window.addEventListener("load", function() {
8 // put DOM code here to ensure elements have been loaded
9 console.log('window loaded');
10
11 let ring = document.getElementById("ring-button");
12 ring.addEventListener("click", function (event) {
13 console.log("ring ring");
14 });
15
16 let knock = document.getElementById("knock-button");
17 knock.addEventListener("click", function (event) {
18 console.log("knock knock");
19 });
20 });
21 </script>
22</head>
23<body>
24 <div id="toolbar">
25 <button id="ring-button">Ring Bell</button>
26 <button id="knock-button">Knock on Door</button>
27 </div>
28</body>
29</html>
Console Output (if "Knock on Door" button is clicked)
window loaded
knock knock
mouseover and mouseout Events¶There are many mouse related DOM events. We have already used the click event. Another example
of a mouse event is the mouseover event, which is triggered when the mouse cursor enters
an element.
Example
We can use mouseover event to add a ">" to the innerHTML of the element that the mouse cursor has been moved over.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Mouseover Event</title>
5 <script>
6 window.addEventListener("load", function() {
7 let list = document.getElementById("lane-list");
8 list.addEventListener("mouseover", function (event) {
9 let element = event.target;
10 element.innerHTML += ">";
11 console.log("target", element);
12 });
13 });
14 </script>
15</head>
16<body>
17 Mouseover Race
18 <ul id="lane-list">
19 <li>Lane 1</li>
20 <li>Lane 2</li>
21 <li>Lane 3</li>
22 </ul>
23</body>
24</html>
Example HTML Output (if the mouse is moved over elements in the list)
Mouseover Race
Lane 1>>>>>>>
Lane 2>>>>>>>>>>>>
Lane 3>>>>>>>>
Similarly, there is a mouseout event that is triggered when the cursor leaves a given element.
Question
Which error occurs when you try to access an element that has not been loaded into the DOM?
Question
What is true when the load event is triggered on window?