第9章 JavaScript事件处理

Question

1. 页面窗体中有用户名和密码两个文本框，当焦点进入文本框时在文本框后面显示"获得焦点，请输入"，当焦点离开这个文本框时在文本框后面显示"失去焦点，判断"，如图 9-19 所示。

Answer 1

这道题考的是表单的焦点事件：onfocus（获得焦点）和 onblur（失去焦点）。就像你点进一个输入框时它"亮起来"，点到别处它就"暗下去"。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<body>
    用户名：<input type="text" id="uname"
        onfocus="showMsg('unameMsg', 'uname获得焦点，请输入')"
        onblur="showMsg('unameMsg', 'uname失去焦点，判断')" />
    <span id="unameMsg"></span><br />

    密码：<input type="password" id="pwd"
        onfocus="showMsg('pwdMsg', 'pwd获得焦点，请输入')"
        onblur="showMsg('pwdMsg', 'pwd失去焦点，判断')" />
    <span id="pwdMsg"></span>

    <script type="text/javascript">
        // 在指定的span中显示提示消息
        function showMsg(spanId, msg) {
            document.getElementById(spanId).textContent = msg;
        }
    </script>
</body>
</html>

代码要点说明：

onfocus 事件在输入框获得光标焦点时触发（用户点击进入）。
onblur 事件在输入框失去焦点时触发（用户点击到其他地方）。
用 <span> 作为提示文字的容器，通过 textContent 动态更新内容。

📖 参见 9.1.2 事件的类型（form 事件：onfocus/onblur）、9.1.3 事件处理程序的绑定方式

Answer 2

当鼠标移开链接时触发 onmouseout 事件，弹出 confirm 确认框，用户点"确定"就跳转。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MouseOut事件</title>
</head>
<body>
    <!-- 淘宝网链接，鼠标移开时触发事件 -->
    <a href="https://www.taobao.com" id="tbLink"
       onmouseout="goTaobao()">淘宝网</a>
    <br />
    <p>www.sohu.com</p>

    <script type="text/javascript">
        function goTaobao() {
            // 弹出确认框，用户点"确定"返回true
            var result = confirm("下面将自动转到淘宝网");
            if (result) {
                // 跳转到淘宝
                window.location.href = "https://www.taobao.com";
            }
        }
    </script>
</body>
</html>

代码要点说明：

onmouseout 事件在鼠标从元素上移开时触发。
confirm() 弹出带"确定"和"取消"按钮的对话框，点"确定"返回 true，点"取消"返回 false。
window.location.href 设置页面跳转地址。

📖 参见 9.1.2 事件的类型（mouse 事件：onmouseout）、9.1.1 事件概念

Answer 3

分别使用 onclick（单击事件）和 ondblclick（双击事件）来触发不同的弹窗。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标到单击、双击事件</title>
</head>
<body>
    <!-- 单击按钮 -->
    <input type="button" value="单击" onclick="alert('按钮被单击了')" />
    <!-- 双击按钮 -->
    <input type="button" value="双击" ondblclick="alert('按钮被双击了')" />
</body>
</html>

代码要点说明：

onclick 在鼠标单击时触发。
ondblclick 在鼠标双击时触发（两次快速点击）。
这里直接在 HTML 属性中写 alert()，是最简单的 HTML 事件处理程序绑定方式。

📖 参见 9.1.2 事件的类型（mouse 事件：onclick/ondblclick）、9.1.3 事件处理程序的绑定方式

Answer 4

通过键盘事件（onkeydown、onkeypress、onkeyup）获取按键信息。从截图可以看到，每次按键会依次输出事件类型、键码和字符。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>
    <p>请按下键盘上的任意键，下方会显示事件信息：</p>
    <div id="output"></div>

    <script type="text/javascript">
        var output = document.getElementById("output");

        // 显示信息的辅助函数
        function log(msg) {
            output.innerHTML += msg + "<br />";
        }

        // keydown：按键按下时触发，显示keyCode
        document.onkeydown = function(e) {
            log("onkeydown");
            log(e.keyCode); // 键码值
        };

        // keypress：字符键按下时触发，显示实际字符
        document.onkeypress = function(e) {
            log("onkeypress");
            log(String.fromCharCode(e.charCode || e.keyCode)); // 字符
        };

        // keyup：按键松开时触发
        document.onkeyup = function(e) {
            log("onkeyup");
        };
    </script>
</body>
</html>

代码要点说明：

键盘事件触发顺序：keydown → keypress → keyup。
e.keyCode 获取按键的键码值（如 a=65, b=66）。
String.fromCharCode() 将键码转换为对应的字符。
keypress 只对字符键有效（字母、数字），功能键（Shift、Ctrl 等）不触发。

📖 参见 9.1.2 事件的类型（keyboard 事件：onkeydown/onkeypress/onkeyup）

Answer 5

这道题综合了表单验证和事件处理：提交时检查姓名和协议，复位时用 confirm 让用户二次确认。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用Form对象实现Web页面信息交互</title>
</head>
<body>
    <form name="myForm" onsubmit="return checkForm()" onreset="return confirmReset()">
        请输入姓名 <input type="text" name="username" /><br />
        接受商城协议 <input type="checkbox" name="agree" /><br />
        <input type="submit" value="提交" />
        <input type="reset" value="复位" />
    </form>

    <script type="text/javascript">
        // 提交时的验证
        function checkForm() {
            var name = document.myForm.username.value;
            var agreed = document.myForm.agree.checked;

            // 检查姓名是否为空，以及是否勾选了协议
            if (name === "" || !agreed) {
                alert("姓名不能为空且必须接受协议!");
                return false; // 阻止表单提交
            }
            return true; // 允许提交
        }

        // 复位时的确认
        function confirmReset() {
            // 弹出确认框，点"取消"则不清除
            return confirm("真的清除吗?");
        }
    </script>
</body>
</html>

代码要点说明：

onsubmit="return checkForm()"：表单提交前调用验证函数，返回 false 则阻止提交。
onreset="return confirmReset()"：表单重置前弹出确认框，点"取消"则不重置。
document.myForm.username.value 通过表单名和控件名直接访问表单元素的值。
.checked 属性判断复选框是否被勾选。

📖 参见 9.1.2 事件的类型（form 事件：onsubmit/onreset）、9.1.3 事件处理程序的绑定方式

第9章 JavaScript事件处理

编程题