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:
coursesweb.net/javascript/events-js


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.

<style>
#dv1 {
background:#b0deb0;
font-size:20px;
height:50px;
padding:3% 8px 5px 8px;
text-align:center;
width:120px;
}
</style>

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

<script>
function changeBgr(elm){
 elm.style.background ='#bebefe';
}

function changeTxt(elm){
 elm.innerHTML ='Peace is Good.';
}
</script>
- 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>

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

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.
<style>
#frm1 input {
background:#b0dfb0;
font-size:16px;
text-align:center;
width:50px;
}
#frm1 input:focus {
background:#ededaf;
}
</style>

<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'>
</form>

<script>
//function called by onkeyup; receives the order index of the element in the form
function nextElm(ev){
 var elm = ev.target; //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
}
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
JavaScript Events

Last accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (46841)
  2. Convert XML to JSON in JavaScript (17992)
  3. Get Duration of Audio /Video file before Upload (6242)
  4. Read Excel file data in PHP - PhpExcelReader (58996)
  5. Ajax-PHP Chat Script (37151)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (524)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (451)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (329)
  4. Insert, Select and Update NULL value in MySQL (316)
  5. PHP getElementById and getElementsByTagName (307)