Onchange
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</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 = [Link]("mySelect").value;
[Link]("demo").innerHTML = "You selected: " + x;
</script>
</body>
</html>
Onselect
<!DOCTYPE html>
<html>
<body>
Select some of the text: <input type="text" value="Hello world!"
onselect="myFunction()">
<script>
function myFunction() {
alert("You selected some text!");
}
</script>
</body>
</html>
Onsubmit
<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts
some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>
Onreset
<!DOCTYPE html>
<html>
<body>
<p>When you reset the form, a function is triggered which alerts
some text.</p>
<form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>
<script>
function myFunction() {
alert("The form was reset");
}
</script>
</body>
</html>
Onload
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
Onunload
<!DOCTYPE html>
<html>
<body onunload="myFunction()">
<h1>Welcome to my Home Page</h1>
<p>Close this window or press F5 to reload the page.</p>
<p><strong>Note:</strong> Due to different browser settings, this event
may not always work as expected.</p>
<script>
function myFunction() {
alert("Thank you for visiting W3Schools!");
}
</script>
</body>
</html>