JavaScript Events
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on
these events.
HTML Events
An HTML event can be something the browser does, or something a
user does.
Here are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
<element event='some JavaScript'>
Example
<button onclick=“console.log(‘buttom was clicked’)”>The time
is?</button>
<button onclick="document.getElementById('demo').innerHTML=Date()">
this timme is</button>
<p id="demo"></p> // the example above, the JavaScript code changes the
content of the element with id="demo".
<button onclick="this.innerHTML=Date()">The time is?</button>
//In the next example, the code changes the content of its own element using
this.innerHtml
<button onclick="displayDate()">display date</button>
<p id="demo2"></p>
function displayDate(){
document.getElementById('demo2').innerHTML=Date();
}
Event Description
onchange An HTML element has been
changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over
an HTML element
onmouseout The user moves the mouse away
from an HTML element
onkeyPress The user pushes a keyboard key
onload The browser has finished loading
the page
document.addEventListener('DOMContentLoaded' , ()=>{
const box1=document.getElementById('box1');
if(box1){
box1.addEventListener('click' , ()=>{
console.log('click by event');
box1.innerHTML=Date();
});
}
else{
console.log("element not found");
}
})
Reacting to Events
A JavaScript can be executed when an event occurs, like when a user
clicks on an HTML element.
To execute code when a user clicks on an element, add JavaScript
code to an HTML event attribute:
onclick=JavaScript
Examples of HTML events:
When a user clicks the mouse
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
When a user strokes a key
<h2 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
<h2 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
HTML Event Attributes
To assign events to HTML elements you can use event attributes.
<button onclick="displayDate()">Try it</button>
Assign Events Using the HTML DOM
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Enter your name: <input type="text" id="fname" oninput="upperCase()">
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
The addEventListener() method
Add an event listener that fires when a user clicks a button:
document.getElementById("myBtn").addEventListener("click",
displayDate);
The addEventListerner method attaches an event handler to the
specified element.
The addEventListerner method attaches an event handler to an
element without overwriting existing event handlers.
<button id="btn“ >try me</button>
<script>
document.getElementById('btn').addEventListener("click" , function(){
alert('hello');
})
</script>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!");
}
function someOtherFunction() {
alert ("This function was also executed!");
}
</script>
function myFunction() {
<script>
document.getElementById("demo").innerHTML
var x = += "Moused over!<br>";
document.getElementById("m }
yBtn");
function mySecondFunction() {
x.addEventListener("mouseov document.getElementById("demo").innerHTML
er", myFunction); += "Clicked!<br>";
}
x.addEventListener("click",
mySecondFunction); function myThirdFunction() {
x.addEventListener("mouseou document.getElementById("demo").innerHTML
+= "Moused out!<br>";
t", myThirdFunction); }
</script>
