7.8 Events Part 2¶
In this lesson; we will be using the following HTML document:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>The website</title>
<style>
section{
margin: 2rem 0;
padding: 2rem 0;
border-bottom: 0.3rem solid CadetBlue;
}
#box-1{
width: 25rem;
height: 25rem;
background: lightblue;
}
#box-2{
width: 20rem;
height: 20rem;
background: Olive;
}
#box-3{
width: 15rem;
height: 15rem;
background: tomato;
}
#box-4{
width: 10rem;
height: 10rem;
background: yellow;
}
</style>
</head>
<body>
<header>
<h1>Welcome to our website</h1>
</header>
<section id="container">
<div id="box-1">
<div id="box-2">
<div id="box-3">
<div id="box-4"></div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
This keyword¶
Task 1: If the user clicks on the first box, the border of the box becomes 0.3rem #000 dotted.
let el = document.getElementById("box-1");
el.onclick = function(e){
e.preventDefault();
el.style.border = "0.3rem #000 dotted";
}
The onclick event occurs if the user clicks on the specified element or any of its children.
Task 2: Refer to task 1; what is the target of the click event?
let el = document.getElementById("box-1");
el.onclick = function(e){
e.preventDefault();
console.log(e.target);
}
The result may vary:
//if the user clicks on the first box, the target is:
<div id="box-1"></div>
//if the user clicks on the second box, the target is:
<div id="box-2"></div>
//if the user clicks on the third box, the target is:
<div id="box-3"></div>
//if the user clicks on the fourth box, the target is:
<div id="box-4"></div>
Task 3: Refer to task 1; replace el.style.border = "0.3rem #000 dotted" with this.style.border = "0.3rem #000 dotted" `
let el = document.getElementById("box-1");
el.onclick = function(e){
e.preventDefault();
this.style.border = "0.3rem #000 dotted";
}
Task 4: Refer to task 3; log this in the console.
let el = document.getElementById("box-1");
el.onclick = function(e){
e.preventDefault();
this.style.border = "0.3rem #000 dotted";
console.log(this);
}
The result is: <div id="box-1"></div>
This
In the last task, the this keyword refers to the element for which we write the handler function.
The handler function
In task 4; function(e){//code} is also called a handler function
Task 5: If the user clicks on the third box, change the background color of that box to black.
let el = document.getElementById("box-3");
el.onclick = function(e){
e.preventDefault();
this.style.backgroundColor = "#000";
}
Notice that if the user clicks on either box 3 or its children, the background color of box 3 is changed
addEventListener()¶
Task 6: If the user clicks on the fourth box, change the box background color to Gainsboro.
let el = document.getElementById("box-4");
el.onclick = function(e){
e.preventDefault();
this.style.backgroundColor = "Gainsboro";
}
Task 7: Refer to task 6; if the user clicks on the fourth box, also add a border to the box 0.4rem LemonChiffon double.
let el = document.getElementById("box-4");
el.onclick = function(e){
e.preventDefault();
this.style.backgroundColor = "Gainsboro";
this.style.border = "0.4rem LemonChiffon double";
}
Task 8: Create a function that changes the background color of an element to SpringGreen.
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
Task 9: Create a function that adds 1rem CadetBlue dotted border to an element.
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
Task 10: Apply the handlers in task 8 and task 9 to the click event on the third box.
let el = document.getElementById("box-3");
el.onclick = function(e){
e.preventDefault();
this.style.backgroundColor = "SpringGreen";
}
el.onclick = function(e){
e.preventDefault();
this.style.border = "1rem CadetBlue dotted";
}
In task 10; the second event handler overrides the first one. Hence, the background color of the box does not change when the click event occurs
Task 11: Study the following example.
let el = document.getElementById("box-3");
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
el.addEventListener("click", changeBgColor);
el.addEventListener("click", addBorder);
addEventListener()
The el.addEventListener(event, funcName) method binds a handler function to a specific element. You can attach as many handlers as you wish to the element.
Task 12 Create a function that adds the text "this is a text" to an element.
function addText(){
this.appendChild(document.createTextNode("this is a text"));
}
Task 13: Attach the handler function introduced in task 12 to the element in task 11 when a click event occurs.
let el = document.getElementById("box-3");
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
function addText(){
this.appendChild(document.createTextNode("this is a text"));
}
el.addEventListener("click", changeBgColor);
el.addEventListener("click", addBorder);
el.addEventListener("click", addText);
Task 14 Create a function that changes the color of an element to red.
function changeColor(){
this.style.color = "red";
}
Task 15: Attach the handler function introduced in task 14 to the element in task 13 when a click event occurs.
let el = document.getElementById("box-3");
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
function addText(){
this.appendChild(document.createTextNode("this is a text"));
}
function changeColor(){
this.style.color = "red";
}
el.addEventListener("click", changeBgColor);
el.addEventListener("click", addBorder);
el.addEventListener("click", addText);
el.addEventListener("click", changeColor);
Task 16 Create a function that changes the font size of an element text to 1.5rem.
function changeFontSize(){
this.style.fontSize = "1.5rem";
}
Task 17: Attach the handler function introduced in task 16 to the element in task 15 when a click event occurs.
let el = document.getElementById("box-3");
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
function addText(){
this.appendChild(document.createTextNode("this is a text"));
}
function changeColor(){
this.style.color = "red";
}
function changeFontSize(){
this.style.fontSize = "1.5rem";
}
el.addEventListener("click", changeBgColor);
el.addEventListener("click", addBorder);
el.addEventListener("click", addText);
el.addEventListener("click", changeColor);
el.addEventListener("click", changeFontSize);
Notice that when you attach an event to an element using addEventListener, always write the event name without on. For example, you write click rather than onclick.
removeEventListener()¶
Task 18: Refer to task 17; detach changeColor event handler from the element. Hint: use el.removeEventListener('click', 'changeColor').
let el = document.getElementById("box-3");
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
function addText(){
this.appendChild(document.createTextNode("this is a text"));
}
function changeColor(){
this.style.color = "red";
}
function changeFontSize(){
this.style.fontSize = "1.5rem";
}
el.addEventListener("click", changeBgColor);
el.addEventListener("click", addBorder);
el.addEventListener("click", addText);
el.addEventListener("click", changeColor);
el.addEventListener("click", changeFontSize);
el.removeEventListener('click', changeColor);
removeEventListener()
The el.removeEventListener(event, funcName) method detaches a handler function to a specific element.
Task 19: Refer to task 18; detach addBorder event handler from the element.
let el = document.getElementById("box-3");
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
function addText(){
this.appendChild(document.createTextNode("this is a text"));
}
function changeColor(){
this.style.color = "red";
}
function changeFontSize(){
this.style.fontSize = "1.5rem";
}
el.addEventListener("click", changeBgColor);
el.addEventListener("click", addBorder);
el.addEventListener("click", addText);
el.addEventListener("click", changeColor);
el.addEventListener("click", changeFontSize);
el.removeEventListener('click', changeColor);
el.removeEventListener('click', addBorder);
Task 20: Refer to task 19; detach changeFontSize event handler from the element.
let el = document.getElementById("box-3");
function changeBgColor(){
this.style.backgroundColor = "SpringGreen";
}
function addBorder(){
this.style.border = "1rem CadetBlue dotted";
}
function addText(){
this.appendChild(document.createTextNode("this is a text"));
}
function changeColor(){
this.style.color = "red";
}
function changeFontSize(){
this.style.fontSize = "1.5rem";
}
el.addEventListener("click", changeBgColor);
el.addEventListener("click", addBorder);
el.addEventListener("click", addText);
el.addEventListener("click", changeColor);
el.addEventListener("click", changeFontSize);
el.removeEventListener('click', changeColor);
el.removeEventListener('click', addBorder);
el.removeEventListener('click', changeFontSize);
Event Bubbling & Capturing¶
Task 21: Select the box 1, and attach the following box1Clicked handler to it on a click event.
function box1Clicked(){
console.log("Box 1 is clicked");
}
let box1 = document.getElementById("box-1");
box1.addEventListener('click', box1Clicked);
The result is: Box 1 is clicked
Task 22: Refer to task 21; select box 2, and attach the following addBox2Text handler to it on a click event.
function box1Clicked(){
console.log("Box 1 is clicked");
}
let box1 = document.getElementById("box-1");
box1.addEventListener('click', box1Clicked);
function box2Clicked(){
console.log("Box 2 is clicked");
}
let box2 = document.getElementById("box-2");
box2.addEventListener('click', box2Clicked);
The result is as follows:
Box 2 is clicked
Box 1 is clicked
Task 23: Refer to task 22; select box 3, and attach the following addBox3Text handler to it on a click event.
function box1Clicked(){
console.log("Box 1 is clicked");
}
let box1 = document.getElementById("box-1");
box1.addEventListener('click', box1Clicked);
function box2Clicked(){
console.log("Box 2 is clicked");
}
let box2 = document.getElementById("box-2");
box2.addEventListener('click', box2Clicked);
function box3Clicked(){
console.log("Box 3 is clicked");
}
let box3 = document.getElementById("box-3");
box3.addEventListener('click', box3Clicked);
The result is as follows:
Box 3 is clicked
Box 2 is clicked
Box 1 is clicked
Task 24: Refer to task 23; select box 4, and attach the following box4Clicked handler to it on a click event.
function box1Clicked(){
console.log("Box 1 is clicked");
}
let box1 = document.getElementById("box-1");
box1.addEventListener('click', box1Clicked);
function box2Clicked(){
console.log("Box 2 is clicked");
}
let box2 = document.getElementById("box-2");
box2.addEventListener('click', box2Clicked);
function box3Clicked(){
console.log("Box 3 is clicked");
}
let box3 = document.getElementById("box-3");
box3.addEventListener('click', box3Clicked);
function box4Clicked(){
console.log("Box 4 is clicked");
}
let box4 = document.getElementById("box-4");
box4.addEventListener('click', box4Clicked);
The result is as follows:
Box 4 is clicked
Box 3 is clicked
Box 2 is clicked
Box 1 is clicked
The order of event handlers execution
When elements are nested inside each other, and each element has a specific event handler, in which order the event handlers are called? The default behavior is to call the innermost target, and then successively calling the event handlers of the parent elements. This behavior is called event bubbling.
If you wish to change the order of calling the event handlers from the outermost element to the innermost element, add true to the addEventListener. For example, el.addEventListener(event, func, true).
Task 25: Refer to task 22; change the order of calling the event handlers from the outermost element to the innermost one.
function box1Clicked(){
console.log("Box 1 is clicked");
}
let box1 = document.getElementById("box-1");
box1.addEventListener('click', box1Clicked, true);
function box2Clicked(){
console.log("Box 2 is clicked");
}
let box2 = document.getElementById("box-2");
box2.addEventListener('click', box2Clicked, true);
The result is as follows:
Box 1 is clicked
Box 2 is clicked
Task 26: Refer to task 23; change the order of calling the event handlers from the outermost element to the innermost one.
function box1Clicked(){
console.log("Box 1 is clicked");
}
let box1 = document.getElementById("box-1");
box1.addEventListener('click', box1Clicked, true);
function box2Clicked(){
console.log("Box 2 is clicked");
}
let box2 = document.getElementById("box-2");
box2.addEventListener('click', box2Clicked, true);
function box3Clicked(){
console.log("Box 3 is clicked");
}
let box3 = document.getElementById("box-3");
box3.addEventListener('click', box3Clicked, true);
The result is as follows:
Box 1 is clicked
Box 2 is clicked
Box 3 is clicked
Task 27: Refer to task 24; change the order of calling the event handlers from the outermost element to the innermost one.
function box1Clicked(){
console.log("Box 1 is clicked");
}
let box1 = document.getElementById("box-1");
box1.addEventListener('click', box1Clicked, true);
function box2Clicked(){
console.log("Box 2 is clicked");
}
let box2 = document.getElementById("box-2");
box2.addEventListener('click', box2Clicked, true);
function box3Clicked(){
console.log("Box 3 is clicked");
}
let box3 = document.getElementById("box-3");
box3.addEventListener('click', box3Clicked, true);
function box4Clicked(){
console.log("Box 4 is clicked");
}
let box4 = document.getElementById("box-4");
box4.addEventListener('click', box4Clicked, true);
The result is as follows:
Box 1 is clicked
Box 2 is clicked
Box 3 is clicked
Box 4 is clicked