Scribd
Upload
65 views8 pages

Javascript Events

This document discusses JavaScript events and provides examples of using different event handlers like onclick, onmouseover, onload, onfocus, ondblclick etc. to trigger JavaScript functions and modify elements. The examples demonstrate how events can be used to change text, styles, colors and more in response to user actions like clicks, mouseovers etc.

Uploaded by

Bala Sudhakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
65 views8 pages

Javascript Events

This document discusses JavaScript events and provides examples of using different event handlers like onclick, onmouseover, onload, onfocus, ondblclick etc. to trigger JavaScript functions and modify elements. The examples demonstrate how events can be used to change text, styles, colors and more in response to user actions like clicks, mouseovers etc.

Uploaded by

Bala Sudhakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

JAVASCRIPT EVENTS

<h1 onclick="this.innerHTML='Ooops!'">Click on this


text!</h1>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

1
<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

<body onload="checkCookies()">

<p id="demo"></p>

<script>
function checkCookies() {
var text = "";

2
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>

<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

Enter your name: <input type="text" id="fname"


onchange="myFunction()">
<p>When you leave the input field, a function is triggered which
transforms the input text to upper case.</p>

3
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-
color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>

<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}

function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"


style="background-
color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>

4
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}

function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>

<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>

5
Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which


changes the background-color.</p>

<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>

</body>

<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>

<body onload="mymessage()">
6
</body>

<body>

<p ondblclick="myFunction()">Double-click this paragraph to trigger a


function.</p>

<p id="demo"></p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>

<body>

<p>This example demonstrates how to assign an "ondblclick" event to a


p element.</p>

7
<p id="demo" ondblclick="myFunction()">Double-click me.</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "I was double-
clicked!";
}
</script>

</body>

You might also like