View video tutorial
HTML Events
HTML
HTML events trigger an action and acts as an interface between browsers and user.
HTML Event Atrributes
➔ Events triggers actions. User performs actions using events.
➔ Each event has corresponding Event Handler and is responsible to call functions.
➔ When event fires Event Handler invoke user defined functions or builtin functions.
➔ Events can be categorized as Windows Event, Form Event, Keyboard Event, Mouse Event, Clipboard Event, Media Event.
The click Event
<button type="button" onclick="handlerFunction()">Click Here!</button>
Example
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<h1>Event Example</h1>
<button type="button" onclick="handlerFunction()">Click Here!</button>
<script>
function handlerFunction() {
alert("Hello from JavaScript!");
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.
Windows Events Global Attributes
This section describes attributes that are for the window object (body element)
| Event | Event Handler | Description |
|---|---|---|
| afterprint | onafterprint | Fires after the document is printed |
| beforeprint | onbeforeprint | Fires before the document is printed |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
The keyup Event
<input id="text1" type="text" onkeyup="handlerFunction()" placeholder="Type something here"/>
Example
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<h1>Event Example</h1>
<h2 id="p1"></h2>
<input id="text1" type="text" onkeyup="handlerFunction()" placeholder="Type something here"/>
<script>
function handlerFunction() {
var t1 = document.getElementById("text1").value;
document.getElementById("p1").innerHTML=t1;
}
</script>
</body>
</html>
Click on the "See output" button to see how it works.