DONATE  
MENU
HTML
PHP
MYSQL
JAVASCRIPT
JSON
CSS
AJAX

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Html / Js Dom » JavaScript Event Listeners
Share Tweet WhatsApp

JavaScript Event Listeners

Events are the various happenings that usually take place on a webpage. For example, when a user loads a webpage, when a user clicks a button, when a user scrolls the webpage, when a user copies, cuts or pastes content, when a user is typing, when a user finishes typing, when a user wants to or leaves a webpage, when a user double click on a content and a whole lot others. Event handlers are functions or programs to execute when an event happens. JavaScript Event Listeners helps us listen to events(happenings) and assign event handlers (functions or programs to execute when such events finally happen or take place on a webpage). It is more like you waiting or listening for your PC battery to be down before plugging it. JavaScript Event Listeners are very important in your quest to making a webpage interactive and dynamic. They allow you assign functions to execute when any event takes place on your webpage. For example, you can assign a function to calculate a user inputs whenever he/she clicks on a button or a function to register a user whenever he/she clicks on the submit button. In this page, we shall get ourselves familiarized with various ways of assigning events handlers to HTML elements' events. EVENT LISTENERS AS HTML ELEMENTS' ATTRIBUTES The easiest way to assign event handlers (functions to events that can take place on a webpage) is through the use of an event listener attribute on the element the event is to take place. The value of the attribute should be the event handler.
<button onclick='myFunc()'>Click Me</button>

<script>
function myFunc(){
alert("You clicked a button.");
}
</script>

Copy PRACTICE IT

Programs can directly be written as the attribute value instead of calling a function.
<button onclick='var sum = 5+6; alert(sum);'>Click Me</button>

Copy PRACTICE IT

Base on your knowledge of HTML/JavaScript DOM, you can access the event attribute and change it value.
<button onclick='myFunc(this)'>Click Me</button>

<script>
function myFunc(el){
el.innerText = "Click Me Again";
el.setAttribute("onclick", "myFunc2()");
alert("You clicked a button. Click again.");
}

function myFunc2(){
alert("Wow...You clicked again.");
}
</script>

Copy PRACTICE IT

Above, we assigned a function to call when a click event takes place on an element. When the function is called, the function in turn accesses the button object and changes the onclick event attribute value using the element's setAttribute() method. You can assign arguments of whatever datatype to the functions to call when an event happens
<p><button onclick="print(1)">NUMBER</button></p>

<p><button onclick="print('Hello World')">STRING</button></p>

<p><button onclick="print(true)">BOOLEAN</button></p>

<p><button onclick="print([1, 'Hi', 5])">ARRAY</button></p>

<p><button onclick="print({name: 'Omamode', age:45})">OBJECT</button></p>

<p><button onclick="print(function myFunc(){})">FUNCTION</button></p>

<script>
function print(param){
alert(param+" datatype is "+typeof(param));
}
</script>

Copy PRACTICE IT

You can assign more than one function to an event.
<button onclick='myFunc(); myFunc2();'>Click Me</button>

<script>
function myFunc(){
alert("This is from the first function.");
}

function myFunc2(){
alert("This is from the second function.");
}
</script>

Copy PRACTICE IT

NOTE:
  • The value of an event attribute just like every other HTML attribute with value should be contained in single or double quotes. Failure to do this may produce unexpected results.
Learn more ways of creating event listeners in the next page. SUMMARY
  1. Events are the various happenings that can take place on a webpage. For example, a user can click on a button.
  2. Event Handlers are programs or functions that execute whenever a particular event happens.
  3. Event Listeners helps us listen and assign functions/programs to events so that whenever they take place, the functions are executed.
  4. There are various ways to assign event handlers on elements.
  5. One of such ways is through the direct declaration of an event attribute on an element.
  6. The value of the attribute should be the function or programs to execute when the event takes place.
Take a short quiz on JavaScript Event Listeners.
Ask a question or tell us if JavaScript Event Listeners is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode