DHTML之事件处理

浏览数：23 / 时间：2015年06月09日

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

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

<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>

技术分享