Scribd
Upload
10 views

Javascript Event

The document describes different HTML DOM events: - The onchange event occurs when an element loses focus and its value has been changed. - The onclick event occurs when the user clicks on an element. - The onmouseover event occurs when the user moves the mouse pointer over an element. - The onmouseout event occurs when the user moves the mouse pointer out of an element. - The onkeydown event occurs when the user presses a keyboard key on an element. - The onload event occurs when an object has been loaded.

Uploaded by

monu kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Javascript Event

The document describes different HTML DOM events: - The onchange event occurs when an element loses focus and its value has been changed. - The onclick event occurs when the user clicks on an element. - The onmouseover event occurs when the user moves the mouse pointer over an element. - The onmouseout event occurs when the user moves the mouse pointer out of an element. - The onkeydown event occurs when the user presses a keyboard key on an element. - The onload event occurs when an object has been loaded.

Uploaded by

monu kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

<!DOCTYPE html>

<html>

<body>

<p>Select a new car from the list.</p>

<select id="techinate" onchange="myFunction()">

<option value="java">java</option>
<option value="php">php</option>

<option value="bootstrap">bootstrap</option>

<option value="jquery">jquery</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 = document.getElementById("mySelect").value;

document.getElementById("techinate").innerHTML = "You selected: " + x;

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h1>HTML DOM Events</h1>

<h2>The onclick Event</h2>

<p>techinate.</p>

<p>techinate:</p>
<button onclick="myFunction()">Click me</button>

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

<script>

function myFunction() {

document.getElementById("techinate").innerHTML = "mohan kumar";

</script>

</body>

</html>

Large image

<!DOCTYPE html>

<html>

<body>

<h1>HTML DOM Events</h1>

<h2>The onmouseover Event</h2>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="kat.jpg"


alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

<script>

function bigImg(x) {

x.style.height = "64px";

x.style.width = "64px";

function normalImg(x) {

x.style.height = "32px";

x.style.width = "32px";

</script>

</body>

</html>

You might also like