Question

感谢您的光临。

目前我正在实施this示例中的代码。在我的aspx文件中，我定义了Label1和Textbox1。在我的aspx.cs文件中，我将Label1.Text属性设置为Page_Load方法中的随机字符串。

在我收录的.js文件中，我有：

var Label1, TextBox1;

Sys.Application.add_init(AppInit);

function AppInit(sender) {
    Label1 = $get('Label1');
    TextBox1 = $get('TextBox1');

    $addHandler(Label1, "click", Label1_Click);
    $addHandler(TextBox1, "blur", TextBox1_Blur);
    $addHandler(TextBox1, "keydown", TextBox1_KeyDown);
}

现在，我想添加更多标签（和相应的文本框），但我不希望为每个附加事件定义单独的处理程序的开销，即我想避免这种情况：

$addHandler(Label1, "click", Label1_Click);
$addHandler(TextBox1, "blur", TextBox1_Blur);
$addHandler(TextBox1, "keydown", TextBox1_KeyDown);
$addHandler(Label2, "click", Label2_Click);
$addHandler(TextBox2, "blur", TextBox2_Blur);
$addHandler(TextBox2, "keydown", TextBox2_KeyDown);
...

如何将参数传递给将准确识别发件人的处理程序，并让处理程序使用“this”等。另外值得注意的是，我希望能够识别Label（1,2,3 ...）的索引，因为我还必须编辑相应的文本框。在实例中，Label1_Click的当前实现如下所示：

function Label1_Click() {
    TextBox1.value = Label1.innerHTML;
    Label1.style.display = 'none';
    TextBox1.style.display = '';
    TextBox1.focus();
    TextBox1.select();
}

谢谢，伙计们。

Answer 1

好吧，$ addHandlers可以帮助加快添加处理程序的过程......同样，在JS中，您可以通过执行以下操作将杂项数据附加到对象：Label1 [“somenewproperty”] = value;所以你可以附加某些属性并检查事件处理程序......虽然这会占用资源，所以要小心你做了多少......

在某种程度上，JS应该如何知道您想要监听的对象以及对象的顺序，以减少代码量？也许存储一组文本框和标签，并通过索引引用这些对象，但在某种程度上，你无法摆脱某些管道代码。

HTH。

Answer 2

您可以尝试创建委托。例如，使用您的标签：

function AppInit(sender) {
  $addHandler(Label1, "click", Function.createDelegate(this, LabelClick());
  $addHandler(Label2, "click", Function.createDelegate(this, LabelClick());
}

function LabelClick(sender)
{
 /..
}

Answer 3

我知道这是一个老问题，但昨天我遇到了同样的问题，这是我提出的解决方案。

我不喜欢它但是没有找到一种更简单的方法：我使用自定义CssClass为每个我希望通过此方法与文本框链接的标签（对于文本框也是如此）。然后我迭代它们并附加相应的处理程序，具体取决于它是标签还是按钮。

var labels;
var texts;

Sys.Application.add_init(AppInit);

function AppInit(sender) {

  labels = document.getElementsByClassName('lblDynamic');
  texts = document.getElementsByClassName('txtDynamic');

  for (i = 0; i < labels.length; i++)
  {
      $addHandler(labels[i], "click", Label1_Click);
  }

  for (i = 0; i < texts.length; i++) {

      $addHandler(texts[i], "blur", TextBox1_Blur);
      $addHandler(texts[i], "keydown", TextBox1_KeyDown);
  }
}

下一步是访问方法处理程序中的泛型控件。使用this引用非常简单。例如：

function TextBox1_KeyDown(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    this.blur();
  }
}

但是这里有一个问题：我怎么知道某个标签与某个文本框配对？我对两个控件都使用了非常相似的id。 ASP将在渲染页面后添加它的viewstate奇怪的命名法，所以我需要使用非常肮脏的技巧来摆脱额外的文本。然后我迭代文本框控件，如果一个匹配处理事件上的标签，那么我可以像你发布的例子一样使用它们：

function Label1_Click() 
{
    var offset = this.id.indexOf('lbl') + 3;

    for (j = 0; j < texts.length; j++) 
    {
        if (texts[j].id.substring(offset) == this.id.substring(offset)) 
        {
            texts[j].value = this.innerHTML;
            this.style.display = 'none';
            texts[j].style.display = '';
            texts[j].focus();
        }            
    }
}

在这种情况下，我的标签和文本框以这种方式声明。请注意非常相似的命名法：

<asp:Label runat="server" CssClass="lblDynamic" ID="lblExerciseName">My Text</asp:Label>
<asp:TextBox runat="server" CssClass="txtDynamic" ID="txtExerciseName" Style="display: none;" />

希望有所帮助：）

Answer 4

有很多方法，但是这个方法在任何浏览器中都能很好地运行，而且你不需要库。

我将onclick处理程序附加到此页面上的每个输入，并为其提供2个参数，这些参数是从二维数组中获得的。我使用了一个闭包来确保处理程序仍然可以访问给定的参数。我也让我成为一个全局对象（p从页面开始），所以我不会用变量来混淆全局命名空间。

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var btns = document.getElementsByTagName("input");
                    var parameters = [["btn1 p1", "btn1 p2"], ["btn2 p1", "btn2 p2"]];
                    for(var i = 0, ceiling = btns.length; i < ceiling; i++) {
                        btns[i].onclick = function(par1, par2) {
                            return function() {
                                p.btnOnclick(par1, par2);
                            };
                        }(parameters[i][0], parameters[i][1]);
                    }
                },
                btnOnclick: function(par1, par2) {
                    alert("par1: " + par1 + " | par2: " + par2);
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <input type="button" value="button1"/>
        <input type="button" value="button2"/>
    </body>
</html>

如何在javascript中向参数处理程序添加参数？

4 个答案: