JavaScript学习笔记之常用的事件

最新推荐文章于 2025-04-26 15:57:22 发布

原创最新推荐文章于 2025-04-26 15:57:22 发布 · 223 阅读

CC 4.0 BY-SA版权

本文详细介绍了网页中的各种事件及其使用方法，包括鼠标事件如点击、移动、悬停等，以及输入框事件如内容改变、选中、获取焦点和失去焦点等。此外还介绍了页面加载和卸载事件。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #did{
            width:200px;
            height:200px;
            background-color:blue;
            font-size:x-large;
        }
    </style>
</head>
<body onload="loadDemo()" onunload="unloadDemo()">

    <!-- onclick()：鼠标点击事件； -->
    <button id="btn" onclick="clickEvent()">按钮</button>
    <script type="text/javascript">
        function clickEvent() {
            alert("鼠标点击事件！");
        }
    </script>

    <!--onmouseover()：鼠标移动到html元素上时触发的事件；-->
    <!--onmouseout()：鼠标离开html元素时触发的事件；-->
    <!--onmousedown()：鼠标左键按下时触发的事件；-->
    <!--onmouseup()：鼠标左键弹起时触发的 事件；-->
    <div id="did" onmouseover="onOver()" onmouseout="onOut()" onmousedown="onDown()" onmouseup="onUp()"></div>
    <script type="text/javascript">
        var id = document.getElementById("did");    // 根据id获取html元素；
        function onOver() {                         
            id.innerHTML = "鼠标来了！";
            id.style.backgroundColor = "green";
        }
        function onOut() {
            id.innerHTML = "鼠标走了！";
            id.style.backgroundColor = "red";
        }
        function onDown() {
            id.style.color = "black";
            id.style.fontSize = "xx-large";
        }
        function onUp() {
            id.style.color = "blue";
            id.style.fontSize = "large";
        }
    </script>

    <!--onchange()：html元素内容发生改变时触发的事件；-->
    <!--onselect()：html元素内容被选中时触发的事件；-->
    <!--onfocus()：html元素获取到焦点时触发的事件；-->
    <!--onblur()：html元素失去焦点时触发的事件；-->
    <form>
        <input type="text" onchange="changeDemo(this)" onselect="selectDemo(this)" 
            onfocus="focusDemo(this)" onblur="blurDemo(this)" />
        <input type="button" value="按钮" />
    </form>
    <script type="text/javascript">

        function changeDemo(obj) {
            alert("内容改变了！");
        }
        function selectDemo(obj) {
            obj.style.backgroundColor = "green";
            obj.style.fontSize = "xx-large";
        }
        function focusDemo(obj) {
            obj.style.backgroundColor = "MediumSpringGreen";
        }
        function blurDemo(obj) {
            obj.style.backgroundColor = "VioletRed";
            obj.style.fontSize = "large";
        }
    </script>

    <!-- onload()：网页加载成功时触发的事件；在 <body> 标签中调用； -->
    <!-- onunload()：网页关闭时触发的事件；在 <body> 标签中调用； -->
    <script type="text/javascript">
        function loadDemo() {
            alert("网页加载成功！");
        }
        function unloadDemo() {
            alert("网页关闭！");
        }
    </script>
</body>
</html>