List with JavaScript events

There are many events that can be used in JavaScript programming, an entire list can be found at MDN: JavaScript Standard Events.

- Here there are presented on categories lists with some of the most commonly used JS events, with code and examples.

General Events

These events has general usage, can be added to the window object, the HTML document, or to the most HTML elements on page.

copy - is fired when the user initiates a copy action through the browser UI (for example, using the CTRL+C keyboard shortcut or selecting the "Copy" from the menu).

<h4>Example copy</h4>
<p id='elm1'>Select a part of this text and try to copy it. With Ctrl+C, or right-click and Copy.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var elm = document.getElementById('elm1');
elm.addEventListener('copy', (ev)=>{
 document.getElementById('resp').innerHTML ='You copied the text.';
});
</script>

error - an error occurred to the attached object. For example, when an image or media content is not loaded.

<h4>Example error</h4>
<p>The following image is not at the specified address, which emits an error.<br></p>
<img id='elm1' src="error_img.png" title="Image"/>
<blockquote id='resp'>#resp</blockquote>

<script>
var elm = document.getElementById('elm1');
elm.addEventListener('error', (ev)=>{
 document.getElementById('resp').innerHTML ='Error: The image cannot be loaded.';
});
</script>

load - a page or other resource and its dependent components have finished loading.

<h4>Example load</h4>
<p>When click on the button it is added in page an image with 'onload' attribute that calls a JS function when the image is loaded.</p>
<blockquote id='resp'>#resp</blockquote>
<button id='btn1'>Add Image</button>

<script>
//called by load event
function imgLoad(elm){
 document.getElementById('resp').innerHTML ='The Image was loaded from: '+elm.src;
}

document.getElementById('btn1').addEventListener('click', (ev)=>{
 ev.target.insertAdjacentHTML('beforebegin', "<img src='/marplo/imgs/smile_gift.png' onload='imgLoad(this)'/>");
});
</script>

scroll - it is emitted when the document view or an element has been scrolled.

<h4>Example scroll</h4>
<p>Scroll down the following content.</p>
<blockquote id='resp'>#resp</blockquote>
<pre style='background:#bbfabb; font-weight:700; height:160px; overflow:auto; max-width:480px;' id='elm1'>
 All come and go.
 Where do they come from, and where do they disappear?!
 How well they come,
 How well they go.

 While I'm in this world,
 I just watch and admire them,
 Without judging,
 And not interested in them.
</pre>

<script>
document.getElementById('elm1').addEventListener('scroll', (ev)=>{
 document.getElementById('resp').innerHTML ='You scrolled the content.';
});
</script>

Events for Drag-Drop

drag - an element or text selection is being dragged (Fired continuously every 350ms).

<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Example drag</h4>
<p>Drag the EGG with the mouse and leave it in the NEST.<br>
 - While it is dragged, it is displayed the number of times the 'drag' event emits.</p>
<div id='edrag' draggable='true'>EGG</div>
<div id='edrop' ondragenter='return false;'>NEST</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrd =0; //counter

//function called by dragstart
function dragStart(ev){
 //Set the type and value of the dragged content
 //this value will be returned by getData(). In this case, the ID of moved object
 ev.dataTransfer.setData('text', ev.target.id);
}

//called by drag, when the element is dragged
function drag(ev){
 nrd++;
 resp.innerHTML = nrd;
}

function allowDrop(ev){
 ev.preventDefault(); //cancels the event
}

//function called by ondrop
function drop(ev){
 ev.preventDefault(); //cancels the default event to allow the execution of ondrop

 //gets the value set by setData() (ID of moved object),
 //as parameter is used the same type of string set with setData()
 var drag_data = ev.dataTransfer.getData('text');

 //adds the object in the element defined for Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //the dragged element, Drag
var edrop = document.getElementById('edrop'); //the element for Drop
var resp = document.getElementById('resp');

//registers to the events Drag-Drop the defined functions
edrag.addEventListener('dragstart', dragStart);
edrag.addEventListener('drag', drag);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

dragend - a drag operation is being ended (by releasing a mouse button or hitting the escape key).

<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Example dragend</h4>
<p>Dragg the EGG with your mouse and leave it in the NEST.<br>
 - After the click is released, it triggers 'dragend' and adds a message to #resp.</p>
<div id='edrag' draggable='true'>EGG</div>
<div id='edrop' ondragenter='return false;'>NEST</div>
<blockquote id='resp'>#resp</blockquote>

<script>
//function called by dragstart
function dragStart(ev){
 //Set the type and value of the dragged content
 //this value will be returned by getData(). In this case, the ID of moved object
 ev.dataTransfer.setData('text', ev.target.id);
}

//called by dragend, when the element is released
function dragend(ev){
 resp.innerHTML ='The EGG arrived to NEST';
}

function allowDrop(ev){
 ev.preventDefault(); //cancels the event
}

//function called by ondrop
function drop(ev){
 ev.preventDefault(); //cancels the default event to allow the execution of ondrop

 //gets the value set by setData() (ID of moved object),
 //as parameter is used the same type of string set with setData()
 var drag_data = ev.dataTransfer.getData('text');

 //adds the object in the element defined for Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //the dragged element, Drag
var edrop = document.getElementById('edrop'); //the element for Drop
var resp = document.getElementById('resp');

//registers to the events Drag-Drop the defined functions
edrag.addEventListener('dragstart', dragStart);
edrag.addEventListener('dragend', dragend);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

dragenter - a dragged element or text selection enters a valid drop target.

<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Example dragenter</h4>
<p>Drag slowly the EGG with your mouse and leave it in the NEST.<br>
 - When it enters in the 'drop' area (to Nest) it is emitted 'dragenter' and adds a message to #resp.</p>
<div id='edrag' draggable='true'>EGG</div>
<div id='edrop' ondragenter='return dragenter();'>NEST</div>
<blockquote id='resp'>#resp</blockquote>

<script>
//function called by dragstart
function dragStart(ev){
 //Set the type and value of the dragged content
 //this value will be returned by getData(). In this case, the ID of moved object
 ev.dataTransfer.setData('text', ev.target.id);
}

//called by dragenter
function dragenter(ev){
 resp.innerHTML ='The EGG arrived to NEST';
 return false;
}

function allowDrop(ev){
 ev.preventDefault(); //cancels the event
}

//function called by ondrop
function drop(ev){
 ev.preventDefault(); //cancels the default event to allow the execution of ondrop

 //gets the value set by setData() (ID of moved object),
 //as parameter is used the same type of string set with setData()
 var drag_data = ev.dataTransfer.getData('text');

 //adds the object in the element defined for Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //the dragged element, Drag
var edrop = document.getElementById('edrop'); //the element for Drop
var resp = document.getElementById('resp');

//registers to the events Drag-Drop the defined functions
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

dragleave - is fired when a dragged element or text selection leaves a valid drop target.

<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Example dragleave</h4>
<p>Dragg the EGG with your mouse and leave it in the NEST.<br>
 - When the item is dragged outside the Drop area, it adds a message to #resp.</p>
<div id='edrag' draggable='true'>EGG</div>
<div id='edrop' ondragenter='return false;'>NEST</div>
<blockquote id='resp'>#resp</blockquote>

<script>
//function called by dragstart
function dragStart(ev){
 //Set the type and value of the dragged content
 //this value will be returned by getData(). In this case, the ID of moved object
 ev.dataTransfer.setData('text', ev.target.id);
}

//called by dragleave
function dragleave(ev){
 resp.innerHTML ='The Egg wants in NEST';
}

function allowDrop(ev){
 ev.preventDefault(); //cancels the event
}

//function called by ondrop
function drop(ev){
 ev.preventDefault(); //cancels the default event to allow the execution of ondrop

 //gets the value set by setData() (ID of moved object),
 //as parameter is used the same type of string set with setData()
 var drag_data = ev.dataTransfer.getData('text');

 //adds the object in the element defined for Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //the dragged element, Drag
var edrop = document.getElementById('edrop'); //the element for Drop
var resp = document.getElementById('resp');

//registers to the events Drag-Drop the defined functions
edrag.addEventListener('dragstart', dragStart);
edrag.addEventListener('dragleave', dragleave);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

dragover - an element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms).

<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Example dragover</h4>
<p>Dragg the EGG with your mouse to NEST.<br>
 - When the dragged item is in the Drop area, it is emitted the event 'dragover' and adds to #resp the number of calls.</p>
<div id='edrag' draggable='true'>EGG</div>
<div id='edrop' ondragenter='return false;' ondragover='dragover();'>NEST</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrd = 0; //counter

//function called by dragstart
function dragStart(ev){
 //Set the type and value of the dragged content
 //this value will be returned by getData(). In this case, the ID of moved object
 ev.dataTransfer.setData('text', ev.target.id);
}

//called by dragover
function dragover(ev){
 nrd++;
 resp.innerHTML = nrd;
}

function allowDrop(ev){
 ev.preventDefault(); //cancels the event
}

//function called by ondrop
function drop(ev){
 ev.preventDefault(); //cancels the default event to allow the execution of ondrop

 //gets the value set by setData() (ID of moved object),
 //as parameter is used the same type of string set with setData()
 var drag_data = ev.dataTransfer.getData('text');

 //adds the object in the element defined for Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //the dragged element, Drag
var edrop = document.getElementById('edrop'); //the element for Drop
var resp = document.getElementById('resp');

//registers to the events Drag-Drop the defined functions
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

dragstart - the user starts dragging an element or text selection.

<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Example dragstart</h4>
<p>Dragg with your mouse the EGG object to leave it to NEST.<br>
 - When drag starts, it adds a message to #resp.</p>
<div id='edrag' draggable='true'>EGG</div>
<div id='edrop' ondragenter='return false;'>NEST</div>
<blockquote id='resp'>#resp</blockquote>

<script>
//function called by dragstart
function dragStart(ev){
 //Set the type and value of the dragged content
 //this value will be returned by getData(). In this case, the ID of moved object
 ev.dataTransfer.setData('text', ev.target.id);

 resp.innerHTML ='The EGG started to NEST';
}

function allowDrop(ev){
 ev.preventDefault(); //cancels the event
}

//function called by ondrop
function drop(ev){
 ev.preventDefault(); //cancels the default event to allow the execution of ondrop

 //gets the value set by setData() (ID of moved object),
 //as parameter is used the same type of string set with setData()
 var drag_data = ev.dataTransfer.getData('text');

 //adds the object in the element defined for Drop
 ev.target.appendChild(document.getElementById(drag_data));
}

var edrag = document.getElementById('edrag'); //the dragged element, Drag
var edrop = document.getElementById('edrop'); //the element for Drop
var resp = document.getElementById('resp');

//registers to the events Drag-Drop the defined functions
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

drop - an element is dropped on a valid drop target.
- It comes immediately after dragend.

<style>
#edrop {
background:#f0f1af;
display:inline-block;
font-size:18px;
font-weight:700;
min-height:100px;
margin:5px 25px;
text-align:center;
width:180px;
}
#edrag {
background:#bfbffb;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
cursor:pointer;
display:inline-block;
height:60px;
margin:30px;
padding-top:20px;
text-align:center;
width:60px;
}
</style>

<h4>Example drop</h4>
<p>Dragg the EGG with your mouse and leave it in the NEST.<br>
 - After the object is placed in the Drop area, it is emitted 'drop' and adds a message to #resp.</p>
<div id='edrag' draggable='true'>EGG</div>
<div id='edrop' ondragenter='return false;'>NEST</div>
<blockquote id='resp'>#resp</blockquote>

<script>
//function called by dragstart
function dragStart(ev){
 //Set the type and value of the dragged content
 //this value will be returned by getData(). In this case, the ID of moved object
 ev.dataTransfer.setData('text', ev.target.id);
}

function allowDrop(ev){
 ev.preventDefault(); //cancels the event
}

//function called by ondrop
function drop(ev){
 ev.preventDefault(); //cancels the default event to allow the execution of ondrop

 //gets the value set by setData() (ID of moved object),
 //as parameter is used the same type of string set with setData()
 var drag_data = ev.dataTransfer.getData('text');

 //adds the object in the element defined for Drop
 ev.target.appendChild(document.getElementById(drag_data));

 resp.innerHTML ='The EGG is safe in NEST';
}

var edrag = document.getElementById('edrag'); //the dragged element, Drag
var edrop = document.getElementById('edrop'); //the element for Drop
var resp = document.getElementById('resp');

//registers to the events Drag-Drop the defined functions
edrag.addEventListener('dragstart', dragStart);
edrop.addEventListener('drop', drop);
edrop.addEventListener('dragover', allowDrop);
</script>

Events for media

These events are generally applied to media type objects: <audio>, <embed>, <img>, <object>, and <video>.

canplay - is fired when the user agent can play the media.

<h4>Example canplay</h4>
<p>When click on the Play button, it is added a music in the &lt;audio&gt; element.<br>
 When the music can be played in browser, it starts and adds to #resp its name from 'src'.</p>
<audio src='#' id='audio' type='audio/mp3' controls style='display:none'></audio>
<button id='btn1' data-src='javascript/tranki_piano.mp3'>Play</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//make visible #audio and adds the src address
var playAudio =(ev)=>{
 audio.style.display ='block';
 audio.src = ev.target.getAttribute('data-src');
 ev.target.outerHTML =''; //removes the button
}

//when the music can be played
audio.addEventListener('canplay', (ev)=>{
 audio.play(); //starts the music
 document.getElementById('resp').innerHTML ='You listen: '+ audio.src.match(/[^\/]+$/i)[0];
});

//when clicks on #btn1 calls playAudio()
document.getElementById('btn1').addEventListener('click', playAudio);
</script>

ended - is fired when playback or streaming has stopped because the end of the media was reached.

<h4>Example ended</h4>
<p>When the music ends playing, it is emitted the 'ended' event and shows the name from 'src'.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls autoplay></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//when the music ends
audio.addEventListener('ended', (ev)=>{
 document.getElementById('resp').innerHTML ='You listened: '+ audio.src.match(/[^\/]+$/i)[0];
});
</script>

loadedmetadata - the metadata has been loaded (duration, text trcks and sizes for video).

<h4>Example loadedmetadata</h4>
<p>When click on the Play button, it is added a music in the &lt;audio&gt; element.<br>
 When meta data is loaded, it shows the name from 'src' and duration (in seconds).</p>
<audio src='#' id='audio' type='audio/mp3' controls style='display:none'></audio>
<button id='btn1' data-src='javascript/tranki_piano.mp3'>Play</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//makes #audio visible and adds the src address
var playAudio =(ev)=>{
 audio.style.display ='block';
 audio.src = ev.target.getAttribute('data-src');
 ev.target.outerHTML =''; //removes the button
}

//When meta data is loaded
audio.addEventListener('loadedmetadata', (ev)=>{
 document.getElementById('resp').innerHTML = audio.src.match(/[^\/]+$/i)[0] +' - Duration: '+ audio.duration;
});

//when clicks on #btn1 calls playAudio()
document.getElementById('btn1').addEventListener('click', playAudio);
</script>

loadstart - is fired when progress has begun on the loading of a resource.

<h4>Example loadstart</h4>
<p>When click on the Play button, it is added a music in &lt;audio&gt; element.<br>
 When the load starts, it shows the name from 'src' address.</p>
<audio id='audio' type='audio/mp3' controls style='display:none'></audio>
<button id='btn1' data-src='javascript/tranki_piano.mp3'>Play</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

//makes the #audio visible and adds the src address
var playAudio =(ev)=>{
 audio.style.display ='block';
 audio.src = ev.target.getAttribute('data-src');
 audio.load(); //loads the file
 ev.target.outerHTML =''; //removes the button
}

//when load starts
audio.addEventListener('loadstart', (ev)=>{
 document.getElementById('resp').innerHTML ='You can listen: '+ audio.src.match(/[^\/]+$/i)[0];
});

//when clicks on #btn1 calls playAudio()
document.getElementById('btn1').addEventListener('click', playAudio);
</script>

pause - playback has been paused.

<h4>Example pause</h4>
<p>If you press the button for Pause, it shows a message.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls autoplay></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('pause', (ev)=>{
 document.getElementById('resp').innerHTML ='You pressed pause';
});
</script>

play - playback has begun.

<h4>Example play</h4>
<p>When you press the button for Play, it shows a message.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('play', (ev)=>{
 document.getElementById('resp').innerHTML ='You pressed Play';
});
</script>

seeking - a seek operation began (the user moves the playback cursor).

<h4>Example seeking</h4>
<p>If you move the position of the 'playback' cursor, it displays the current position (in seconds).</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('seeking', (ev)=>{
 document.getElementById('resp').innerHTML = audio.currentTime;
});
</script>

timeupdate - the time indicated by the currentTime attribute has been update.

<h4>Example timeupdate</h4>
<p>When the position of the 'playback' cursor is changed, it displays the current position (in seconds).</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('timeupdate', (ev)=>{
 document.getElementById('resp').innerHTML ='Playback position: '+ audio.currentTime;
});
</script>

volumechange - it is emitted when the volume has changed.

<h4>Example volumechange</h4>
<p>If you change the volume, it shows current volume.</p>
<audio src='javascript/tranki_piano.mp3' id='audio' type='audio/mp3' controls></audio>
<blockquote id='resp'>#resp</blockquote>

<script>
var audio = document.getElementById('audio');

audio.addEventListener('volumechange', (ev)=>{
 document.getElementById('resp').innerHTML ='Volume: '+ audio.volume;
});
</script>

Events for mouse

click - it is emitted when a pointing device button has been pressed and released on an element.

<h4>Example click</h4>
<p>Click on the following button. It will display the number of clicks.</p>
<button id='btn1'>Click</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrc =0;
document.getElementById('btn1').addEventListener('click', (ev)=>{
 nrc++;
 document.getElementById('resp').innerHTML = nrc;
});
</script>

contextmenu - the right button of the mouse is clicked (it fires before the context menu is displayed).

<h4>Example contextmenu</h4>
<div id='elm1' style='background:#d8d9fe; font-weight:700; height:70px; margin:5px 15%; padding:20px 5px 5px 5px; text-align:center;;'>Click here the right mouse button.</div>

<script>
document.getElementById('elm1').addEventListener('contextmenu', (ev)=>{
 alert('You pressed right-click');
});
</script>

dblclick - a pointing device button is clicked twice on an element (double-click).

<h4>Example dblclick</h4>
<div id='elm1' style='background:#bfbffb; height:70px; padding:20px 5px 5px 5px; text-align:center; width:150px;'>Double-click here.</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('dblclick', (ev)=>{
 nrc++;
 document.getElementById('resp').innerHTML = nrc;
});
</script>

mouseenter - a pointing device enters in the area of the element that has the listener attached.

<h4>Example mouseenter - mouseleave</h4>
<p>When the mouse enters in the area of the next rectangle, it changes the background, and displays the number of entries.<br>
When the mouse leaves the rectangle area, it sets another background.</p>
<div id='elm1' style='background:#bfbffb; font-size:22px; font-weight:700; height:70px; padding:35px 5px 5px 5px; text-align:center; width:150px;'>0</div>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('mouseenter', (ev)=>{
 nrc++;
 ev.target.innerHTML = nrc;
 ev.target.style.background ='#f0f1af';
});
document.getElementById('elm1').addEventListener('mouseleave', (ev)=>{
 ev.target.style.background ='#abfbab';
});
</script>

mouseleave - a pointing device is moved off the element that has the listener attached.

<h4>Example mouseenter - mouseleave</h4>
<p>When the mouse enters in the area of the next rectangle, it changes the background.<br>
When the mouse leaves the rectangle area, it sets another background and displays the number of exits.</p>
<div id='elm1' style='background:#bfbffb; font-size:22px; font-weight:700; height:70px; padding:35px 5px 5px 5px; text-align:center; width:150px;'>0</div>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('mouseleave', (ev)=>{
 nrc++;
 ev.target.innerHTML = nrc;
 ev.target.style.background ='#f0f1af';
});
document.getElementById('elm1').addEventListener('mouseenter', (ev)=>{
 ev.target.style.background ='#abfbab';
});
</script>

mousemove - a pointing device is moved over an element. (Fired continously as the mouse moves).

<h4>Example mousemove</h4>
<p>When the mouse moves on the next rectangle, it displays the number of moves.</p>
<div id='elm1' style='background:#bfbffb; font-size:22px; font-weight:700; height:70px; padding:35px 5px 5px 5px; text-align:center; width:150px;'>0</div>

<script>
var nrc =0;
document.getElementById('elm1').addEventListener('mousemove', (ev)=>{
 nrc++;
 ev.target.innerHTML = nrc;
});
</script>

mouseout - a pointing device is moved off the element that has the listener attached or off one of its children.

<style>
#ep1, #ep2 {
background:#abfbab;
display:inline-block;
font-size:18px;
font-weight:700;
margin:5px 25px;
text-align:center;
width:170px;
}
#ep2 {
background:#f0f1af;
}
.echd {
background:#bfbffb;
margin:40px;
}
</style>

<h4>Example difference: mouseleave - mouseout</h4>
<p>The 'mouseleave' and 'mouseout' events are registered to the Parent element.<br>
 When the mouse leaves the Parent area, it displays the number of exits at the first child.<br>
 - Go in and out with the mouse in the next rectangles, including Child.</p>
<div id='ep1'>Parent - mouseleave
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>
<div id='ep2'>Parent - mouseout
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>

<script>
var nrc1 =0;
var nrc2 =0;
var echd1 = document.querySelector('#ep1 .echd'); //1st child in #ep1
var echd2 = document.querySelector('#ep2 .echd'); //1st child in #ep2

//mouseleave for #ep1
document.getElementById('ep1').addEventListener('mouseleave', (ev)=>{
 nrc1++;
 echd1.innerHTML = nrc1;
});

//mouseout for #ep2
document.getElementById('ep2').addEventListener('mouseout', (ev)=>{
 nrc2++;
 echd2.innerHTML = nrc2;
});
</script>

mouseover - a pointing device is moved onto the element that has the listener attached or onto one of its children..

<style>
#ep1, #ep2 {
background:#abfbab;
display:inline-block;
font-size:18px;
font-weight:700;
margin:5px 25px;
text-align:center;
width:170px;
}
#ep2 {
background:#f0f1af;
}
.echd {
background:#bfbffb;
margin:40px;
}
</style>

<h4>Example difference: mouseenter - mouseover</h4>
<p>The 'mouseenter' and 'mouseover' events are registered to the Parent element.<br>
 When the mouse enters the Parent area, it displays the number of entries at the first child.<br>
 - Go in and out with the mouse in the next rectangles, including Child.</p>
<div id='ep1'>Parinte - mouseenter
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>
<div id='ep2'>Parinte - mouseover
<div class='echd'>Child</div>
<div class='echd'>Child 2</div>
</div>

<script>
var nrc1 =0;
var nrc2 =0;
var echd1 = document.querySelector('#ep1 .echd'); //1s child in #ep1
var echd2 = document.querySelector('#ep2 .echd'); //1st child in #ep2

//mouseenter for #ep1
document.getElementById('ep1').addEventListener('mouseenter', (ev)=>{
 nrc1++;
 echd1.innerHTML = nrc1;
});

//mouseover for #ep2
document.getElementById('ep2').addEventListener('mouseover', (ev)=>{
 nrc2++;
 echd2.innerHTML = nrc2;
});
</script>

Events for form elements

blur - it is emitted when a form element (or an element with contenteditable attribute) has lost focus.

<h4>Example blur</h4>
<p>Click on the input text field, then click outside it, in that moment it loses focus and the 'blur' event calls a JavaScript function that changes the input background.</p>
Name: <input type='text' id='elm1'>

<script>
document.getElementById('elm1').addEventListener('blur', (ev)=>{
 ev.target.style.background ='#efabcd';
});
</script>

change - is emitted after the value of a form element is changed.

<h4>Example change</h4>
<p>When you select an option in the select field, it is displayed the selected value.</p>
Select: <select id='elm1'><option value='marplo.net'>MarPlo</option><option value='coursesweb.net'>CoursesWeb</option><option value='gamv.eu'>gamV</option></select>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('change', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.value;
});
</script>

focus - it is emitted when a form element (or an element with contenteditable attribute) has received focus.

<h4>Example focus</h4>
<p>When click on the text field, that input receives focus, and is called a JavaScript function that changes the background color.<br>
 - The background is changed for focus and blur.</p>
Name: <input type='text' id='elm1'>

<script>
var elm = document.getElementById('elm1');
elm.addEventListener('blur', (ev)=>{
 ev.target.style.background ='#efabcd';
});
elm.addEventListener('focus', (ev)=>{
 ev.target.style.background ='#abcdef';
});
</script>

input - the value of a form element changes or the content of an element with the attribute contenteditable is modified.

<h4>Example input</h4>
<p>Write something in the text field, the 'input' event calls a JavaScript function that displays the text.</p>
Name: <input type='text' id='elm1'>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('input', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.value;
});
</script>

invalid - a submittable element has been checked and doesn't satisfy its constraints.

<h4>Example invalid</h4>
<p>The next email box has the 'required' attribute, if the input field not contains a valid email address when the form is submited, it is emitted the event 'invalid' that displays a message.</p>
<form action='#'>
Email: <input type='email' required id='elm1'><br>
<input type='submit' value='Submit'>
</form>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('invalid', (ev)=>{
 document.getElementById('resp').innerHTML ='Adds a valid email address';
});
</script>

reset - a form is reset (with the 'reset', button, or the reset() method).

<h4>Example reset</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
<input type='reset' value='Reset'>
</form>
<p> Click on the Reset button.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
//fires when #frm1 is reseted
document.getElementById('frm1').addEventListener('reset', (ev)=>{
 document.getElementById('resp').innerHTML ='The form is reseted.';
});
</script>

select - some text (in <input> or <textarea>) is being selected.

<h4>Example select</h4>
<p>Select the text in the input field.</p>
Name: <input type='text' value='MarPlo' id='elm1'>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('select', (ev)=>{
 document.getElementById('resp').innerHTML ='You selected the text.';
});
</script>

submit - a form is submitted.

<h4>Example submit</h4>
<form id='frm1' action='#'>
Text: <input type='text' name='txt1' placeholder='Minimum 3 characters'><br>
<input type='submit' value='Submit'>
</form>
<p>If the text field contains less then 3 characters when the form is submited, it displays a message.<br>
 Otherwise, it submit the form with the submit() method.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//when #frm1 is submitted
frm1.addEventListener('submit', (ev)=>{
 //stops automatic form submission
 ev.preventDefault();

 var tval = frm1['txt1'].value;
 if(tval.length <3) document.getElementById('resp').innerHTML ='Add minimum 3 characters.';
 else frm1.submit();
});
</script>

Events for keyboard

keydown - any key is pressed.

<h4>Example keydown</h4>
<p>Press on your keyboard buttons.</p>
<strong id='resp'></strong>

<script>
//window.top represents the main window in browser
window.top.addEventListener('keydown', (ev)=>{
 //adds in #resp the pressed key
 document.getElementById('resp').insertAdjacentHTML('beforeend', ev.key);
});
</script>

keypress - any key except Shift, Fn, CapsLock is in pressed position. (Fired continously).

<h4>Example keypress</h4>
<p>Press on your keyboard buttons.</p>
<strong id='resp'></strong>

<script>
//window.top represents the main window in browser
window.top.addEventListener('keypress', (ev)=>{
 //adds in #resp the pressed key
 document.getElementById('resp').insertAdjacentHTML('beforeend', ev.key);
});
</script>

keyup - any key is released.

<h4>Example keyup</h4>
<p>Press on your keyboard buttons.</p>
<strong id='resp'></strong>

<script>
//window.top represents the main window in browser
window.top.addEventListener('keyup', (ev)=>{
 //adds in #resp the pressed key
 document.getElementById('resp').insertAdjacentHTML('beforeend', ev.key);
});
</script>

Events for window

beforeunload - the window, the document and its resources are about to be unloaded.
If a string is assigned to the returnValue Event property, a dialog appears asking the user for confirmation to leave the page

<h4>Example beforeunload</h4>
<p>Click on this button: <button>Click</button>, it registers the 'beforeunload' event.<br>
Then press F5 or close the page.<br><br>
 - Or, click on the next link that opens another document in the page; it triggers the 'beforeunload' event.<br>
 <a href='/'>Home Page</a>.</p>

<script>
window.addEventListener('beforeunload', (ev)=>{
 ev.returnValue ='Totul a trecut, si asta.';
});
</script>

hashchange - the fragment identifier of the URL has changed (the part of the URL after the #).

<h4>Example hashchange</h4>
<p>When click on the button, the part of the URL after the # is changed, and will trigger the 'hashchange' event that will display a message.</p>
<button id='btn1'>Change hash</button>
<blockquote id='resp'>#resp</blockquote>

<script>
//window.top represents the main window in browser
window.top.addEventListener('hashchange', (ev)=>{
 document.getElementById('resp').innerHTML ='Hash changed: '+ top.location.hash;
});

document.getElementById('btn1').addEventListener('click', (ev)=>{
 top.location.hash ='new_hs';
});
</script>

pageshow - it is emitted after the page is completely loaded. It comes after 'load'.

<h4>Example pageshow</h4>
<p>At 2 seconds after the page has loaded it displays a message.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
//window.top represents the main window in browser
window.top.addEventListener('pageshow', (ev)=>{
 window.setTimeout(()=>{
 document.getElementById('resp').innerHTML ='The page was fully loaded 2 seconds ago';
 });
});
</script>

resize - the document view has been resized.

<h4>Example resize</h4>
<p>Try to resize the browser window.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var nr =0; //counter resize
window.addEventListener('resize', (ev)=>{
 if(nr >0) document.getElementById('resp').innerHTML ='You have changed the window size '+nr+' times.';
 nr++;
});
</script>

Other type of events

DOMContentLoaded - it is added to the document object, and is emitted when the document has finished loading (but not its dependent resources: images, iframes, etc.).
- It not works in <iframe>.

You can copy and test the next example:

<h4>Example DOMContentLoaded</h4>
<p>After the page loads, it keeps the loading time and registers the 'click' event for the following button.<br>
When you click on the buton, it displays the loading time of the page in DOM.</p>
<button id='btn1'>Time Load</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var start_time = window.performance.now();

//after the page is loaded in DOM
document.addEventListener('DOMContentLoaded', (ev)=>{
 //registers 'click' to #btn1
 document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='The HTML loaded in: <em>'+ load_time +'</em> milliseconds.';
 });

 //retine timpul de incarcare
 var load_time = window.performance.now() - start_time;
});
</script>

toggle - it is emitted when the <details> element is open or closed.

<h4>Example toggle</h4>
<p>When you open and close the next &lt;details&gt; element, it displays the 'open' state.</p>
<blockquote id='resp'>Open details:</blockquote>
<details id='elm1'><summary>The Peace is Good.</summary>
<blockquote>
 Observing quietly brings knowledge.<br>
 Knowledge leads to enlightenment.<br>
 Enlightenment brings freedom from illusions and ... Peace.
</blockquote></details>

<script>
document.getElementById('elm1').addEventListener('toggle', (ev)=>{
 document.getElementById('resp').innerHTML ='Open: '+ ev.target.open;
});
</script>

touchmove - A touch point is moved along the touch surface.

<h4>Example touchmove</h4>
<p id='elm1'>- For touch-screen devices.<br>
Touch this paragraph and move your finger on it.<br>
It will shows the X, Y coordinates of the touch.
</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('elm1').addEventListener('touchmove', (ev)=>{
 let x = ev.touches[0].clientX;
 let y = ev.touches[0].clientY;
 document.getElementById('resp').innerHTML = x+', '+ y;
});
</script>

transitionend - a CSS transition has completed.

<style> 
#elm1 {
width: 100px;
height: 100px;
background: #bebefb;
transition: width 2s;
}
#elm1:hover {
width: 420px;
}
</style>
<h4>Example transitionend</h4>
<p>Position the mouse on the next Div and wait 2 seconds to end the 'transition' effect.</p>
<div id='elm1'>Div</div>

<script>
document.getElementById('elm1').addEventListener('transitionend', (ev)=>{
 ev.target.innerHTML ='The transition effect has ended.';
 ev.target.style.background ='#b0efb0';
});
</script>

<<-Properties and Methods of .. -- Properties and Methods of ..->>

List with JavaScript events

Javascript Course

General Events

Events for Drag-Drop

Events for media

Events for mouse

Events for form elements

Events for keyboard

Events for window

Other type of events

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month