<!DOCTYPE html>
<html>
<head>
<title>LAB7
<style>
#popup {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
text-align: center;
font-size: 40px;
}
#btn {
width: 200px;
height: 50px;
border: 1px solid black;
}
#div {
width: 400px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body
="alert('Page loaded!')"
="resizeW()"
="return confirm('Are you sure you want to close the tab?')">
<h1><code>onload</code> event is triggered when the page is loaded</h1>
<p>As soon a page loaded it alerts "Page loaded!" message.</p>
<h1>
resize event triggers a function when the window is resized</h1>
<p>Here whenever you resize the window, the function
resizeW() will be triggered.</p>
<p id="output"></p>
<script>
function resizeW() {
const output = document.
("output");
output.
= window.innerWidth;
console.
("The window has been resized");
}
</script>
<a href="https://www.tutorialstonight.com">Go to homepage
<p>If you refresh this page or click some other link, you will see the confirm box.
<h1>click event is triggered when user clicks on an element
<p id="elm1" onclick="
()">Click this element
<script>
function
() {
document.getElementById("elm1").style.color = "red";
}
</script>
<p id="elm2" ondblclick="
()">Double click this element</p>
<script>
function changeColor1() {
.getElementById("elm2").style.color = "red";
}
</script>
<h1>Mouseover event is triggered when the mouse pointer moves over an element</h1>
<p>Move the mouse pointer over the button to see the result.</p>
<button
="changeColor2()" id="btn1">Change Color</button>
<script>
function changeColor2() {
document.getElementById("
").style.backgroundColor = "red";
}
</script>
<h1>Mouseout event is triggered when the mouse pointer moves out of an element</h1>
<p>Move the mouse pointer out of the button to see the result.</p>
<button
="changeColor3()"
="reverseColor()" id="btn2">Change Color</button>
<script>
function changeColor3() {
document.getElementById("
").style.backgroundColor = "red";
}
function reverseColor() {
document.getElementById("btn2").style.
= "white";
}
</script>
<h1>Mousedown event is triggered when the user presses the mouse button over an element.</h1>
<p>Left or right click the button to see the result.</p>
<button
="openPopup()" id="btn3">Open Popup</button>
<div id="popup">
<p>This is a popup
</div>
<script>
function openPopup() {
document.getElementById("popup").style.
= "block";
}
</script>
<h1>Mouseup event is triggered when the user releases the mouse button.</h1>
<p>Click the mouse button and then release it.</p>
<button onmousedown="openPopup1()"
="closePopup()" id="btn4">Open/close Popup</button>
<div id="popup1">
<p>This is a popup</p>
</div>
<script>
function openPopup1() {
document.getElementById("popup1").
.display = "block";
}
function closePopup() {
document.getElementById("
").style.display = "none";
}
</script>
<h1>Mousemove event is triggered when the mouse pointer moves over the element.</h1>
<p>Move the mouse pointer over the button.</p>
<button onmousemove="trackMouse()" id="btn5">Track Mouse</button>
<script>
function trackMouse() {
var x = event.clientX;
var y = event.clientY;
document.getElementById("btn5").
= "Mouse position: " + x + ", " + y;
}
</script>
<h1>Mouseenter event is triggered when the mouse pointer moves over the element.</h1>
<p>Move the mouse pointer and enter area of the div.</p>
<div
="changeColor4()" id="div1">
<p>This is a div</p>
</div>
<script>
function changeColor4() {
document.getElementById("
").style.backgroundColor = "blue";
}
</script>
<h1>Mouseleave event is triggered when the mouse pointer leaves an element</h1>
<p>Move the mouse pointer enter and leave area of the div.</p>
<div onmouseenter="enterColor()" onmouseleave="leaveColor()" id="div2">
<p>This is a div</p>
</div>
<script>
function enterColor() {
document.getElementById("
").style.backgroundColor = "blue";
}
function leaveColor() {
document.getElementById("
").style.backgroundColor = "red";
}
</script>
<h1>keydown event is triggered when a key is pressed down</h1>
<p>Press any key on the keyboard by focusing on the text area below</p>
<p id="output0"></p>
<textarea onkeydown="keyDown()"></textarea>
<script>
var count = 0;
function keyDown() {
var output0 = document.getElementById("output0");
count++;
output0.
= "You pressed: " + event.key + ", total numberof times: " + count;
}
</script>
<h1>keyup event is triggered when a key is released</h1>
<p>Press any key on the keyboard by focusing on the text area below</p>
<p id="output1"></p>
<textarea
="keyUp()"></textarea>
<script>
var count = 0;
function keyUp() {
var output1 = document.getElementById("
");
count++;
output1.
= "You released: " + event.key + ", total numberof times: " + count;
}
</script>
<h1>keypress event is triggered when a key is pressed</h1>
<p>Press any key on the keyboard by focusing on the text area below</p>
<p id="output2"></p>
<textarea onkeypress="keyPress()"></textarea>
<script>
var count = 0;
function keyPress() {
var
= document.getElementById("output2");
count++;
output2.
= "You pressed: " + event.key + ", numberof times: " + count;
}
</script>
<h1>submit form event is triggered when the form is submitted</h1>
<p>Submit the form to see the result</p>
<form
="submitForm(event)">
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="submit" value="submit">
<closeform></closeform></form>
<script>
function submitForm(event) {
.preventDefault();
alert("form submitted");
}
</script>
<h1>focus event in form element is triggered when the element is focused</h1>
<p>Focus in the input below.</p>
<input type="text"
="focusInput(
)">
<script>
function focusInput(event) {
event.style.backgroundColor = "orange";
}
</script>
<h1>blur event in form element is triggered when the user removes the focus of the input.</h1>
<p>Focus in the input below and then remove the focus.</p>
<input type="text"
="blurInput()">
<script>
function blurInput() {
alert("focus removed");
}
</script>
<h1>change event in form element is triggered when the value of the element is changed</h1>
<p>Change the input below then click outside the input to trigger the change event.</p>
<input type="text"
="changeInput(
)">
<p id="output5"></p>
<script>
function changeInput(event) {
document.getElementById("output5").innerHTML =
.value;
}
</script>
<h1>reset event in form element is triggered when the form is reset</h1>
<p>Set some value in the form and then reset it. The reset event is triggered.</p>
<form
="resetForm()">
<input type="text" name="name1" placeholder="name">
<input type="text" name="email1" placeholder="email">
<input type="reset" value="reset">
<closeform></form>
<script>
function resetForm() {
alert("form reset");
}
</script>
<h1>select event is triggered when the user selects an option from a dropdown list</h1>
<p>Select an option from the dropdown list to see the result.</p>
<select id="cars"
="selectInput()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script>
function selectInput() {
alert("you selected: " + document.
("cars").value);
}
</script>
</body>
</html>