Introduction to JavaScript Events
Code for Changing the background color of a div element on onmouseover
<!--events in javascript-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div id="d1" onmouseover="changecolor()">
Hello Move the cursor here
</div>
<script>
function changecolor()
{
document.getElementById("d1").style.background="aqua";
}
</script>
</body>
</html>
Output
Code for changing the background color for the HTML body on onkeydown event in JavaScript
<!--events in javascript-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body onkeydown="changebackground()">
<div id="d1" onmouseover="changecolor()">
Hello Move the cursor here
</div>
<script>
function changecolor()
{
document.getElementById("d1").style.background="aqua";
}
function changebackground()
{
document.body.style.background="red";
}
</script>
</body>
</html>
Output
Code for changing the text in a division and its background color on clicking a button
<!--events in javascript-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div id="test">
This is some text
</div>
<input type="button" value="Click here" onclick="changedesign()">
<script>
function changedesign()
{
document.getElementById("test").style.background="aqua";
document.getElementById("test").innerHTML="I have changed the text";
}
function changebackground()
{
document.body.style.background="red";
}
</script>
</body>
</html>
Output
Code for changing the color of the text on scroll of a div element using Events
<!--events in javascript-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
<style>
div{
height:500px;
width:300px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="test" onscroll="changecolor()">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit excepturi harum veritatis facere amet dolorum sit laborum eius laboriosam, reprehenderit ea rerum recusandae obcaecati quaerat dignissimos, doloremque eos ut! Sed.lorem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus iure dignissimos amet labore unde accusamus sunt reprehenderit, praesentium facilis asperiores, ipsam sed maiores. Id veniam molestiae enim accusamus quia tempora!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi tenetur praesentium porro perferendis impedit quisquam temporibus alias quidem blanditiis consequuntur voluptatum nulla et quis earum tempore, accusamus laborum eaque eligendi!lorem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi alias esse magnam, vitae iure ad, in pariatur dolores aliquam id optio? Odio placeat harum quos sint ratione eius tempora similique?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, amet, quibusdam assumenda accusantium saepe sapiente voluptatibus aliquam ullam, omnis voluptate vitae vel expedita ea ut dolor dolorum aut repellendus quam!
</div>
<script>
function changecolor()
{
document.getElementById("test").style.color="red";
}
</script>
</body>
</html>
Output
Code for onpaste event - Writing a message on pasting some text in a text area
<!--events in javascript-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
<style>
div{
height:500px;
width:300px;
overflow: scroll;
}
</style>
</head>
<body>
<label for="desc">Paste some text</label><br>
<textarea name="desc" id="d" cols="30" rows="10" onpaste="writetext()" ></textarea>
<script>
function writetext()
{
document.writeln("You have pasted some text");
}
</script>
</body>
</html>
Output
