JS - Event, Event Handler, Event Listener
Often, when events happen, you may want to do something.JavaScript lets you execute code when events are detected. HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.
With single quotes:
< element event='some JavaScript'>
With double quotes:
< element event="some JavaScript">
For example, an onclick attribute (with code), is added to a < button> element:
< !DOCTYPE html>
< html>
< body>
< h1>JavaScript HTML Events< /h1>
< h2>The onclick Attribute< /h2>
< button onclick="document.getElementById('demo').innerHTML=Date()">The time is?< /button>
< p id="demo">< /p>
< p>In the next example, the code changes the content of its own element (using this.innerHTML):< /p>
< button onclick="this.innerHTML=Date()">The time is?< /button>
< p>In the next example, the code gives the content (using function):< /p>
< button onclick="displayDate()">The time is?< /button>
< p id="demo1">< /p>
< /body>
< /html>
Output :
JavaScript HTML EventsThe onclick AttributeIn the next example, the code changes the content of its own element (using this.innerHTML): In the next example, the code gives the content (using function): Common HTML Events : Here is a list of some common HTML events:
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
onload The browser has finished loading the page
onchange Event :
< !DOCTYPE html>
< html>
< body>
< p>Select a new car from the list.< /p>
< select id="mySelect" onchange="myFunction()">
< option value="Selecting">Choose the option< /option>
< option value="Audi">Audi< /option>
< option value="BMW">BMW< /option>
< option value="Jaguar">Jaguar< /option>
< option value="Rollsroyce">Rollsroyce< /option>
< /select>
< p>When you select a new car, a function is triggered which outputs the value of the selected car.< /p>
< p id="demo">< /p>
< script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
< /script>
< /body>
< /html>
Output :
Select a new car from the list. When you select a new car, a function is triggered which outputs the value of the selected car. onclick Event :
< !DOCTYPE html>
< html>
< body>
< h1>HTML DOM Events< /h1>
< h2>The onclick Event< /h2>
< p>The onclick event triggers a function when an element is clicked on.< /p>
< p>Click to trigger a function that will output "Hello World":< /p>
< button onclick="buttonFunction()">Click me< /button>
< p id="democlckbutton">< /p>
< script>
function buttonFunction() {
document.getElementById("democlckbutton").innerHTML = "Hello World";
}
< /script>
< /body>
< /html>
Output :
HTML DOM EventsThe onclick EventThe onclick event triggers a function when an element is clicked on. Click to trigger a function that will output "Hello World": onmouseover :
< !DOCTYPE html>
< html>
< body>
< h1>HTML DOM Events< /h1>
< h2>The onmouseover, onmouseout Event< /h2>
< img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="camera.png" alt="camera" width="50" height="50">
< p>The function bigImg() is triggered when the user moves the mouse pointer over the image.< /p>
< p>The function normalImg() is triggered when the mouse pointer is moved out of the image.< /p>
< script>
function bigImg(x) {
x.style.height = "100px";
x.style.width = "100px";
}
function normalImg(x) {
x.style.height = "50px";
x.style.width = "50px";
}
< /script>
< /body>
< /html>
Output :
HTML DOM EventsThe onmouseover, onmouseout Event
The function bigImg() is triggered when the user moves the mouse pointer over the image. The function normalImg() is triggered when the mouse pointer is moved out of the image. onload :
< html>
< head>
< script type = "text/javascript">
var img = null;
function init(){
img = document.getElementById('myimg');
img.style.position = 'relative';
img.style.left = '50px';
}
function moveRight(){
img.style.left = parseInt(
img.style.left) + 100 + 'px';
}
window.onload = init;
< /script>
< /head>
< body>
< form>
< img id = "myimg" src = "train1.png" />
< center>
< p>Click the below button to move the image right< /p>
< input type = "button" value = "Click Me" onclick = "moveRight();" />
< /center>
< /form>
< /body>
< /html>
Output :
Animation event :
< !DOCTYPE html>
< html>
< style>
#myDIV {
width: 200px;
height: 200px;
background: orange;
position: relative;
font-size: 18px;
padding:16px;
}
@keyframes mymove {
0% {border-radius: 20px;transform: rotate(60deg);background-color: brown;}
25%{border-radius: 60px;transform: rotate(120deg);background-color: red;}
50%{border-radius: 90px;transform: rotate(180deg);background-color: greenyellow;}
75%{border-radius: 120px;transform: rotate(240deg);background-color: skyblue;}
100%{border-radius: 150px;transform: rotate(280deg);background-color: orchid;}
}
< /style>
< body>
< h1>HTML DOM Events< /h1>
< h2>The animationstart, animationiteration and animationend Events< /h2>
< div id="myDIV" onclick="myaniFunction()">Click me< /div>
< script>
const div1 = document.getElementById("myDIV");
function myaniFunction() {
div1.style.animation = "mymove 4s 2";
}
div1.addEventListener("animationstart", myStartFunction);
div1.addEventListener("animationiteration", myRepeatFunction);
div1.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "It's rotating";
this.style.backgroundColor = "pink";
}
function myRepeatFunction() {
this.innerHTML = "It's rotating again";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "It has completed";
this.style.backgroundColor = "lightgray";
}
< /script>
< /body>
< /html>
Output :
HTML DOM EventsThe animationstart, animationiteration and animationend EventsClick me
transitionend event :
< !DOCTYPE html>
< html>
< head>
< style>
#mytransDIV {
width: 200px;
height: 150px;
background: red;
transition: width 2s;
}
#mytransDIV:hover {
width: 800px;
}
< /style>
< /head>
< body>
< p>Hover over the div element below, and wait for the transition effect to end.< /p>
< div id="mytransDIV">< /div>
< script>
document.getElementById("mytransDIV").addEventListener("transitionend", mytransFunction);
function mytransFunction() {
this.innerHTML = "transitionend event occured - The transition has completed";
this.style.backgroundColor = "gold";
}
< /script>
< /body>
< /html>
Output :
Hover over the div element below, and wait for the transition effect to end. « Previous (JS - DOM Methods) |