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 attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
JavaScript Events

Last accessed pages

  1. Wake Up! (3403)
  2. Ajax-PHP Chat Script (37775)
  3. PHP-MySQL Scripts (3924)
  4. Create simple Website with PHP (20532)
  5. Select in MySQL, Output results in HTML Table (5636)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (415)
  2. Read Excel file data in PHP - PhpExcelReader (331)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (257)
  4. PHP getElementById and getElementsByTagName (208)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (199)