Javascript解释 - 语法/格式/风格对我来说是新的

Javascript Explanation - Syntax/format/style is new to me

本文关键字：对我来说 风格 格式 解释 语法 Javascript      更新时间：2023-09-26

我习惯了像这样的javascript函数的语法：

function sample()
{
}

<input type="text" onclick="sampe()" />

一个简单的onclick甚至可以调用上面的JavaScript函数。我在互联网上找到了有关如何动态添加文本框的代码，现在我想制作自己的版本，但要做到这一点，我需要先了解它。我的左眼再也看不清了，所以这真的让我很难搜索和阅读每本指南。如果不是太多，如果有人可以向我解释以下代码的工作原理(FLOW(，我将不胜感激。我也不明白仅对添加按钮而不是其他按钮进行的 onclick 事件，但其他 2 个按钮仍然调用该函数。

<html>
<head>
<title>jQuery add / remove textbox example</title>
 <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var counter = 2;
        $("#addButton").click(function () {
            if (counter > 10) {
                alert("Only 10 textbox allowed");
                return false;
            }
            $('<div/>',{'id':'TextBoxDiv' + counter}).html(
                $('<label/>').html( 'Textbox #' + counter + ' : ' ))
                    .append( $('<input type="text">').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
                    .appendTo( '#TextBoxesGroup' );
            counter++;
        });
        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textox to remove");
                return false;
            }
            counter--;
            $("#TextBoxDiv" + counter).remove();
        });
        $("#getButtonValue").click(function () {
            var msg = '';
            for (i = 1; i < counter; i++) {
                msg += "'n Textbox #" + i + " : " + $('#textbox' + i).val();
            }
            alert(msg);
        });
    });
</script>

</head>
<body>
<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1">
 <label>Textbox #1 : </label><input type='text' id='textbox1' name='textbox1' />
 </div>
</div>
<input type='button' value='Add Button' id='addButton' onclick="dynamictext()"/>
<input type='button' value='Remove Button' id='removeButton' />
<input type='button' value='Get TextBox Value' id='getButtonValue' />
</body>
</html>

下面是一个"内联"事件处理程序： 

onclick="dynamictext()"

在这种情况下，单击按钮时将调用名为 dynamictext 的函数。但是，由于您没有定义动态文本函数，因此会引发异常。如果要查看异常，请打开 Chrome 并按 ctrl+shift+J 打开控制台，然后运行代码。单击该按钮时，控制台将显示"未捕获的引用错误：未定义动态文本"。注意：内联事件处理程序通常被认为是不好的做法，因为它们不会将行为(应在 JavaScript 中定义(与内容(可以在 html 中为静态内容定义或在 JavaScript 中为动态内容定义(分开。

请注意，您不必在 html 和 JavaScript 中分配 onclick 处理程序。只在 html 或 JavaScript 中分配处理程序就足够了。(但是，如果您在 html 中分配处理程序，您仍然必须定义您分配的函数(例如，在本例中为"动态文本"(，这在代码中失败了。

您提供的 Javascript 代码为您的三个按钮定义了点击处理程序。在这里，我展示其中之一：

$("#addButton").click(function () { // This anonymous function (function without a name),
        if (counter > 10) {         // is executed when the button with id="addButton"
            alert("Only 10 textbox allowed");  // is clicked
            return false;
        }
        $('<div/>', {
            'id': 'TextBoxDiv' + counter
        }).html(
        $('<label/>').html('Textbox #' + counter + ' : '))
            .append($('<input type="text">').attr({
            'id': 'textbox' + counter,
            'name': 'textbox' + counter
            })) // It is safer to always use semicolons. You should put one here.

如果你仔细观察，你会注意到匿名函数被传递给jQuery的"click"方法。单击方法添加一个函数，该函数将在触发当前选定元素(即button#addButton(的单击事件时执行(即，当有人单击该元素时(。

相关文章：