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>
<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>
#id { overflow: auto; }
document.getElementById("id").onmouseover = function(){ document.write("Have Good Life"); }
if(isset($_GET["id"])) { echo $_GET["id"]; }