时间戳

首页 > 解决方案 > 理解 JS Event 和 handler 背后的逻辑

javascript - 理解 JS Event 和 handler 背后的逻辑

问题描述

下面是我编写的用于验证名字和姓氏的 JS/Html 代码。当该字段留空时，它将显示红色，当该字段未留空时，它将显示绿色。

现在，有人可以帮我理解这行代码背后的逻辑吗？

var control = document.getElementById(controlID);

这是完整的程序...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateRequiredFields(controlID) {
            var control = document.getElementById(controlID);  //Why are we assigning this to a variable ? what is happening at this code. 
            control.style.color = 'white';

            if (control.value == "") {
                control.style.background = 'red';
            } else {
                control.style.background = 'green';
            }
        }
    </script>
</head>

<body>
    <p> Below is the First Name and Last Name Validation Example. </br>
        1. When the field is blank, it will show red color.</br>
        2. When the field is not blank, it wil show green color.</br>
    </p>
    <table>
        <tr>
            <td>
                First name
            </td>
            <td>
                <input type="text" id="txtFirstName" onkeyup="validateRequiredFields('txtFirstName')"
                    onblur="validateRequiredFields('txtFirstName')">
            </td>
        </tr>
        <tr>
            <td>
                Last Name
            </td>
            <td>
                <input type="text" id="txtLastName" onkeyup="validateRequiredFields('txtLastName')"
                    onblur="validateRequiredFields('txtLastName')">
            </td>
        </tr>
    </table>
</body>

</html>

标签： javascriptdom-events

解决方案

在这样做时，var control = document.getElementById(controlID);您将 DOM 节点的 ID 发送到函数并获取 DOM 节点的引用并将其读入另一个变量，这样您就不需要调用document.getElementById(controlID)；多次，因为这是昂贵的操作 -</p>

推荐阅读