DHTML之事件处理

来源：互联网发布：sql写脚本用什么软件编辑：程序博客网时间：2024/06/06 08:48

在某个事件发生时通过一个事件句柄对某个元素进行某种操作。

onmouseover 和 onmouseout

在鼠标指针移到并移开一个元素时改变一个元素的颜色

<html><body>    <h1 onmouseover="style.color='red'"        onmouseout="style.color='black'">请把鼠标移动到文本上</h1></body></html>

onclick

把灯点亮。如何当您单击一副图像时改变图像，然后再次单击它时换回原来的图像

<html><head>    <script type="text/javascript">        cc = 0        function changeimage() {            if (cc == 0) {                cc = 1                document.getElementById('myimage').src = "../i/eg_bulbon.gif"                //tpa=http://www.w3school.com.cn/i/eg_bulbon.gif            }            else {                cc = 0                document.getElementById('myimage').src = "../i/eg_bulboff.gif"                //tpa=http://www.w3school.com.cn/i/eg_bulboff.gif            }        }    </script></head><body>    <img id="myimage" onclick="changeimage()"        border="0" src="../i/eg_bulboff.gif" tppabs="http://www.w3school.com.cn/i/eg_bulboff.gif"        width="100" height="180" />    <p>请点击这个灯泡，把它点亮吧！</p></body></html>

onmousedown 和 onmouseup
这次只有当你按住鼠标按钮时灯才会亮

<html><head>    <script type="text/javascript">        function lighton() {            document.getElementById('myimage').src = "../i/eg_bulbon.gif"            //tpa=http://www.w3school.com.cn/i/eg_bulbon.gif        }        function lightoff() {            document.getElementById('myimage').src = "../i/eg_bulboff.gif"            //tpa=http://www.w3school.com.cn/i/eg_bulboff.gif        }    </script></head><body>    <img id="myimage" onmousedown="lighton()"        onmouseup="lightoff()"        src="../i/eg_bulboff.gif" tppabs="http://www.w3school.com.cn/i/eg_bulboff.gif" width="100"        height="180">    <p>请点击灯泡，把它点亮！</p></body></html>

onload

当页面完成加载时显示一个提示框

<html><head>    <script type="text/javascript">        function mymessage() {            alert("该消息被 onload 事件触发")        }    </script></head><body onload="mymessage()"></body></html>

0 0