Javascript Course

Events are very important to client-side programming. In JavaScript, events are actions or occurrences that happen to HTML elements.
If the visitor clicks on a button, it fires the "click" event. If the mouse is over a link, it triggers a "mouseover" event.

A list with JavaScript events grouped by categories, with code and examples at:

JavaScript can respond to these events using event handlers, that can execute a function when a specified event is detected.
- You can add an "event handler" in two ways: as an attribute in HTML tag, or in JS code, assigned to a html object.

Event as attribute in HTML tag

Event handlers can be added as attributes in HTML tags using this syntax.

<tag event='JS-code'>
- 'event' represents the name of the event, with the 'on' prefix (onclick, onload, ..).
- 'JS-code' can be a short JavaScript code, but it is generally a JavaScript function that is called when the specified event is detected.

- Example, when the mouse is over a Div, it calls a function that changes its background color, and when you click on that Div it calls another function that chnges its content.

The this keyword represents the element that triggers the event.

#dv1 {
padding:3% 8px 5px 8px;

<h4>Example onmouseenter and onclick</h4>
<div id='dv1' onmouseenter='changeBgr(this)' onclick='changeTxt(this)'>Click Here.</div>

function changeBgr(elm){ ='#bebefe';

function changeTxt(elm){
 elm.innerHTML ='Peace is Good.';
- Demo:
Click Here.

The events can be applied to form fields.
If you want to call a function each time something is added in an <input> field, you can use the 'oninput' event.

- Example, when the user adds characters in an input field, it calls a function that shows the number of characters and displays the text into a HTML element.

<h4>Example oninput</h4>
<p>Add something in the text field. It will be called a function that shows the number of characters and displays the text into a blockquote tag.</p>
Text: <input type='text' value='Quietness' oninput='addTxt(this)'/>
<blockquote id='resp'>#resp</blockquote>

var resp = document.getElementById('resp');
function addTxt(elm){
 var txt = elm.value;
 resp.innerHTML ='<p>Number of characters: '+ txt.length +'</p>'+ txt;

Events added in JavaScript code

In order to not mix HTML tags with JavaScript code, the events can be added directly in JS code, applied to the HTML object accessed in JavaScript.
- Syntax:

function funcName(ev){
 // ev represents the Event object
 //code to execute

elm.event = funcName;
- elm is the HTML object to which the 'event' is added.
The called function: funcName can be defined with a parameter ('ev'); that represents an object with the specified event.

Note, the function is assigned to the event only with the name, without brackets.

• Or with anonymous arrow function:
elm.event =(ev)=>{
 // ev represents the Event object
 //code to execute

Here is an example with 'onkeyup'.
- When an <input> field is filled with the number of characters specified to 'maxlength', the cursor moves to the next input field.
#frm1 input {
#frm1 input:focus {

<h4>Example onkeyup</h4>
<p>When the input field is filled with the number of characters specified to 'maxlength' (4), the cursor moves to the next input field.<br>
 - Type something in the text field.</p>
<form id='frm1'>
 Adaugati text: <input maxlength='4' autofocus> / <input maxlength='4'> / <input maxlength='4'>

//function called by onkeyup; receives the order index of the element in the form
function nextElm(ev){
 var elm =; //the element that triggered the event

 //if the number of characters in elm is equal to maxlength
 if(elm.value.length == elm.maxLength) {
 var next = elm.tabIndex +1; //next input

 //if it is not the last item, focus to the next item
 if(next < frm1.length) frm1[next].focus();

var frm1 = document.getElementById('frm1');

//traverses the elements in frm1
for(var i=0; i<frm1.length; i++){
 frm1[i].tabIndex = i; //sets the order index in the 'tabindex' attribute
 frm1[i].onkeyup = nextElm; //onkeyup calls the nextElm function

Daily Test with Code Example

Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong></strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert(""); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
JavaScript Events

Last accessed pages

  1. Node.js Move and Copy file (27511)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (74116)
  3. Classic Tween - Flash Animation (6016)
  4. Convert BBCode to HTML and HTML to BBCode with JavaScript (8980)
  5. Convert XML to JSON in JavaScript (33302)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (382)
  2. SHA1 Encrypt data in JavaScript (292)
  3. PHP Unzipper - Extract Zip, Rar Archives (275)
  4. SHA256 Encrypt hash in JavaScript (264)
  5. Read Excel file data in PHP - PhpExcelReader (245)