JavaScript/C3/Events-and-Event-Listeners-in-JS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of the script:Events and Event Listeners

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, events, event listeners


Visual Cue
Narration
Slide: Title Hello and Welcome to the spoken tutorial on “Events and Event Listeners in JS”.
Slide:

Learning Objectives

In this tutorial, we will learn about:
  • Events
  • Adding Event Listeners and,
  • Removing Event Listeners in JS
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.51.1 (code editor)
  • Firefox web browser

However you may use any other browser of your choice.

Slide : Pre-requisites To practice this tutorial,
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the files.
  • Make a copy and then use them for practising.
Slide: Events
  • Events are actions or occurrences that happen in the browser window.
  • On any such occurrence, we can handle that event and perform a desired action.
  • DOM events are sent to notify code that have taken place.
  • Technically, each event is represented by an object.
Slide: Events

https://developer.mozilla.org/en-US/docs/Web/Events

  • To know different types of DOM events, visit this link.
Slide: Adding & Removing Event Listeners


  • Every HTML element can be added with an event listener
  • To add an event listener programmatically, we use the addEventListener method.
  • To remove an event listener, programmatically we use the removeEventListener method.
Only Narration Now let us take an example and understand events better.
Show VS editor Open Visual Studio Code editor.
[Editor]


Welcome Page -> Open Folder -> Practice-JS

In the editor, browse and open the folder “Practice-JS ”.


[Editor] Click on Explorer pane -> Practice-JS -> index.html Under Practice-JS folder, open the file named index.html


The same is available in the Code files link for practice.

[Editor] Type:


<!DOCTYPE html>

<html lang="en">

<head>

<title> Events and Event Listeners </title>

</head>

<body>

<button id = "clickButton" > CLICK ME! </button>

<script src = "main.js" > </script>

</body>

</html>

In the index.html file, update the code as shown.


In this code we have written a small HTML code and linked the JS file.

[Editor] Highlight:


<button id = "clickButton" > CLICK ME! </button>

Here, I have created a button with id clickButton.
Press: Ctrl + S Save the file.
Press: Alt + L and Alt + O Start the Live server.
Show firefox The default browser will open automatically and a new tab opens.
[Firefox] Press Ctrl + Shift + I


Point to the browser developer tools


Click on the Console tab

Now open the Browser developer tools panel and go to the console tab.
Switch to Editor Switch back to the editor.
[Editor] Click on


Explorer pane -> Practice-JS -> main.js

Under Practice-JS folder, open the file named main.js
[Editor] Type:


function display() {

console.log("You clicked on the Button!");

}


document.getElementById("clickButton").addEventListener("click", display);

In the main.js file, update the code as shown.
[Editor] [Highlight]:


function display() {

console.log("You clicked on the Button!");

}

Here, I have just declared a normal function, which logs - “You clicked on the Button!”
[Editor] [Highlight]:


document.getElementById("clickButton")

You are already aware that getElementById function returns an element with a specified ID.
[Editor] [Highlight]:


addEventListener

For the returned element, I’m adding an event listener, using the addEventListener method.
[Editor] [Highlight]:


("click", display)

addEventListener method accepts two mandatory parameters.


One is the type of the event, which is click in our case.


And the other is a callback function which would be executed when the event is triggered.


In our case it's a display function.

Press: Ctrl + S Save the file.
Switch to browser Switch back to the browser.
[Browser]

Click on Button [CLICK ME!]

Click on the Click Me button in the webpage.
[Browser] [Console Tab]:


Highlight:

You clicked on the Button!

We can see a log printed in the console on clicking the button.


This indicates that we have successfully added an event listener to the button.


And executed the function on the click of the button.

Switch to Editor Switch back to the editor.
[Editor] Type:


document.getElementById("clickButton").removeEventListener("click", display);

Add this line in the main.js file after the last line.
[Editor] [Highlight]:


document.getElementById("clickButton")

You are already aware that getElementById function returns an element with specified ID.
[Editor] [Highlight]:


removeEventListener

For the returned element, I’m removing the event listener using the removeEventListener method.
[Editor] [Highlight]:


("click", display)

removeEventListener method accepts two mandatory parameters.


One is the type of event that is the click event in our case, which has to be removed.


And the other is a callback function, which has to be removed.


In our case, it's a display function.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:


Show console

We cannot see any log printed in the console on clicking the button.


This is because we have added and removed the event in one go.


You can play around with these methods for better understanding.

Only narration With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt:
  • Events
  • Adding Event Listeners and,
  • Removing Event Listeners in JS
Slide: Assignment As an assignment,
  • Open the file MyPage.html
  • Clear the existing code
  • Add a button named Click with id as click
Slide: Assignment
  • Open the file assignment.js
  • Clear the existing code
  • Access the button element using id
  • Add a event listener
  • On even button clicks, log - Foo
  • On odd button clicks, log - Bar
Slide: Assignment
  • Open the file MyPage.html in a web browser.
  • Observe the output in the browser’s console
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
Slide: Forum questions Pls post your timed queries in this forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India
Slide: Thanks The script for this tutorial is contributed by Jayesh.

And this is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C3/Events-and-Event-Listeners-in-JS/English&oldid=55271"