JavaScript Events

Events added in JavaScript code

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.

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

<<-Accessing form fields -- Register event handlers, Detect ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag defines the clickable areas inside the image map?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Which CSS property defines what is done if the content in a box is too big for its defined space?

display overflow position

#id {
  overflow: auto;
}

Click on the event which is triggered when the mouse is positioned over an object.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

Indicate the PHP variable that contains data added in URL address after the "?" character.

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}