Events are actions that an user performs on a page.
For example, clicking or positioning the mouse over an element, writing in a text input field, or scrolling the page, are events carried out by the user.
To allow you to run some JS code when these events occur, JavaScript provides us with event handlers, like: onclick, onmouseover, onkeypress, onscroll, etc.
You can see a list with JavaScript events grouped by categories, with code and examples at: coursesweb.net/javascript/events-js
element.event_handler = someFunction;- element represents a HTML object that triggers the event_handler, which will execute the function someFunction.
Note that in the registration of an event handler you do not use parentheses () at the name of the function that is called.
<h4>Example onclick</h4> <div id='dv_1' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Click here</div> <script> var elm = document.getElementById('dv_1'); //gets the element // function to execute when the event is triggered function testF(ev){ // ev.target represents the element that triggered the event let id = ev.target.id; alert('DIV id: '+id); } //registers onclick elm.onclick = testF; </script>
element.event_handler =(ev)=>{ //ev is the Event object // code to execute };
<h4>Example event with anoymous arrow function</h4> <div id='dv_1' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Click Here</div> <script> var elm = document.getElementById('dv_1'); //gets the element //registers onclick elm.onclick =(ev)=>{ // ev.target is the element that triggered the event let id = ev.target.id; alert('DIV id: '+id); }; </script>
null
value:
<h4>Example removing event</h4> <div id='dvid' style='width:100px; background:#a8eda9;'>Place the cursor here</div> <script> var elm = document.getElementById('dvid'); // gets the element // register onmouseenter event elm.onmouseover =(ev)=>{ alert('Place the mouse again over that text'); elm.onmouseover = null; // remove the registration }; </script>
this
keyword always refers to the 'owner' of a function. In the case of event handlers, this
refers to the HTML element that trigger the event.<h4>Example with this</h4> <p>Click on the Div. It will call a function that adds its content in textarea and changes its background color.</p> <div id='dvid' style='background:#a8eda9; cursor:pointer; width:125px; padding:8px 12px;'>Div, example with this</div> <textarea id='txta'></textarea> <script> var elm = document.getElementById('dvid'); // registers onclick elm.onclick = function(){ //gets the content from the current element (that triggered the event) let cnt = this.innerHTML; document.getElementById('txta').value = cnt; //sets background this.style.background ='#bebefe'; }; </script>
this
keyword is not recognized in the arrow functions (defined with: ()=>{} ) with the same value.this
is the parent object of the function (in which it is defined).event
parameter (here defined with 'ev'). It contains an object with that event; and has a property: target
containing the object that triggered that event.<h4>Example with arrow function and event parameter</h4> <p>Click on the Div. It will call a function that adds its content in textarea and changes its background color.</p> <div id='dvid' style='background:#a8eda9; cursor:pointer; width:125px; padding:8px 12px;'>Div, example with event.target</div> <textarea id='txta'></textarea> <script> var elm = document.getElementById('dvid'); // registers onclick elm.onclick =(ev)=>{ //gets the content from the element that triggered the event let cnt = ev.target.innerHTML; document.getElementById('txta').value = cnt; //sets background this.style.background ='#bebefe'; }; </script>
addEventListener()
method.<h4>Example with addEventListener()</h4> <p>Move the mouse cursor over the lists below.</p> <ul> <li>WebDevelopment - //coursesweb.net </li> <li>Cursuri gratuite - //marplo.net </li> <li>Games - //gamv.eu </li> </ul> <script> var elm_li = document.getElementsByTagName('li'); //gets all the LI tags //function to execute when the mouseenter is triggered function mEnter(ev){ //sets a background color ev.target.style.background ='#07da08'; } //function to execute when the mouseleave is triggered function mLeave(ev){ //removes background color ev.target.style.background ='none'; } //traverses the object with LI elements for(var i=0; i<elm_li.length; i++){ //register mouseenter and mouseleave to each LI elm_li[i].addEventListener('mouseenter', mEnter); elm_li[i].addEventListener('mouseleave', mLeave); } </script>
addEventListener()
, use the removeEventListener()
method:
addEventListener()
.<h4>Example removes event detection registered with addEventListener</h4> <p>Move the mouse over the following Div.<br> When the number of triggers of the 'mousemove' event reach 12, the detection of this event is removed.</p> <div id='dvid' style='background:#a8eda9; padding:8px; 12px; text-align:center; width:130px'> Div - Move the mouse cursor here.<br> <strong id='resp'>0</strong> </div> <script> var elm = document.getElementById('dvid'); var resp = document.getElementById('resp'); var nre =0; //called by mousemove function mOver(ev){ nre++; resp.innerHTML = nre; if(nre ==12) elm.removeEventListener('mousemove', mOver); //removes the event detection } //registers mousemove elm.addEventListener('mousemove', mOver); </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"]; }