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
Event handlers can be added as attributes in HTML tags using this syntax.
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>
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>
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.Note, the function is assigned to the event only with the name, without brackets.
elm.event =(ev)=>{
// ev represents the Event object
//code to execute
};
<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>
<div>Web Programming and Development</div>
h2 {
text-decoration: underline;
}function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea")); $nr_food = count($food, 1); echo $nr_food; // 6