javascript-DOM-events

compuhelpindia.com

JavaScript HTML DOM Events

« Previous Next Chapter »

HTML DOM allows JavaScript to react to HTML events.

HTML Event Mouseover Mouseout
HTML Event Onclick
HTML Event Change
HTML Event Src Counts
HTML Event Stop and Start

Mouseover And Mouseout Events.

The easiest way to find Events in the DOM.
Eaxmple:

<!DOCTYPE html>
<html>
<script>
function mouseover()
{
document.getElementById("img1").src="Image/Lighthouse.jpg";
}
function mouseout()
{
document.getElementById("img1").src="Image/Koala.jpg";
}
</script>
</head>
<body>
<body>
<img src="Image/Koala.jpg"id="img1"height="100"width="100"
onMouseOver="mouseover()" onMouseOut="mouseout()"/>
</body>
</html>

Go to Image To Mouseover and Mouseout.

DOM Events Onclick.

The easiest way to find Events in the DOM.

Example:

<!DOCTYPE html>
<html>
<body>
<h3 onclick="this.innerHTML='Hello Welcome To Compuhelp!'">Click on this text!</h1>
</body>
</html>

Click on this text!

Onload Events

The easiest way to find Events in the DOM. Example:

<!DOCTYPE html>
<html>
<script>
var img=Array("Image/Koala.jpg","Image/Lighthouse.jpg","Image/Penguins.jpg");
i=0;
function img1()
{
if(i>2)
{
i=0;
}
else
{
document.getElementById("as1").src=img[i];
i++;
}
setTimeout("img1()",1000);
}
</script>
</head>
<body onLoad="img1()">
<img src="Image/Koala.jpg" id="as1" width="100" height="100" />
</body>
</html>

Image Load on Page load

Change Events

The easiest way to find Events in the DOM. Example:

<!DOCTYPE html>
<html>
<script>
function change()
{
alert("You Selected"+document.getElementById("city").value)
}
</script>
</head>
<body>
Select City:<select id="city" onchange="change()">
<option value="Chandigarh">Chandigarh</option>
<option value="Mohali">Mohali</option>
<option value="Jaipur">Jaipur</option>
</select>
</body>
</html>

Select City:

Image src Conut Events

The easiest way to find Events in the DOM. Example:

<!DOCTYPE html>
<html>
<script>
function count()
{
alert(document.images[0].src);
alert(document.images[1].src);
alert(document.images[2].src);
}
</script>
</head>
<body>
Show All Image Src on This Page Click The Button<br>
<input type="button" name="btn" value="Img Count" onClick="count()"/>
</body>
</html>

Show All Image Src on This Page Click The Button

Start And Stop Events

The easiest way to find Events in the DOM. Example:

<!DOCTYPE html>
<html>
</head>
<body>
<marquee onmouseover="stop()" onmouseout="start()">
<h3 style="color:#90C;">Welcome To Compuhelp</h3></marquee>
</body>
</html>

Go To Mouse on Welcome To Compuhelp.