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

谢谢你的关注

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

在我包含的.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”或其他内容。同样值得注意的是，我希望能够识别标签1,2,3的索引。。。因为我还必须编辑相应的文本框。例如，Label1_Click的当前实现如下所示：

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

---

谢谢，各位。

嗯，$addHandlers可以帮助加快添加处理程序的过程。。。此外，在JS中，您可以通过执行以下操作将杂项数据附加到对象：Label1[somenewproperty]=value；因此，您可以附加某些属性并检入事件处理程序。。。但这确实会占用资源，所以要小心你做了多少

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

---

HTH.

嗯，$addHandlers可以帮助加快添加处理程序的过程。。。此外，在JS中，您可以通过执行以下操作将杂项数据附加到对象：Label1[somenewproperty]=value；因此，您可以附加某些属性并检入事件处理程序。。。但这确实会占用资源，所以要小心你做了多少

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

---

HTH.

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

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

function LabelClick(sender)
{
 /..
}

---

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

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

function LabelClick(sender)
{
 /..
}

---

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

我不太喜欢它，但还没有找到一个更简单的方法：我用一个自定义的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);
  }
}

但这里有一个问题：我如何知道某个标签与某个文本框配对？我对这两个控件使用非常相似的id。ASP将在呈现页面后添加其viewstate奇怪的命名法，因此我需要使用非常肮脏的技巧来去除多余的文本。然后我迭代textbox控件，如果其中一个控件与已处理事件上的标签匹配，那么我可以使用它们，如您发布的示例所示：

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;" />

---

希望有帮助：

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

我不太喜欢它，但还没有找到一个更简单的方法：我用一个自定义的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);
  }
}

但这里有一个问题：我如何知道某个标签与某个文本框配对？我对这两个控件使用非常相似的id。ASP将在呈现页面后添加其viewstate奇怪的命名法，因此我需要使用非常肮脏的技巧来去除多余的文本。然后我迭代textbox控件，如果其中一个控件与已处理事件上的标签匹配，那么我可以使用它们，如您发布的示例所示：

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;" />

---

希望它能有所帮助：

有很多方法，但这一种在任何浏览器中都能完美工作，您不需要库

我将一个onclick处理程序附加到这个页面上的每个输入，并给它两个参数，这是我从一个二维数组中得到的。我使用闭包来确保处理程序仍然可以访问给定的参数。我还从第页创建了一个全局对象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> 

---

有很多种方法，但这一种在任何浏览器中都能完美工作，而且您不需要库

我将一个onclick处理程序附加到这个页面上的每个输入，并给它两个参数，这是我从一个二维数组中得到的。我使用闭包来确保处理程序仍然可以访问给定的参数。我还使我成为一个全局对象p fr om页面，因此我不会用变量将全局命名空间弄乱

<!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> 

---

仅供参考-看起来您正在使用Microsoft的客户端库。据微软称，他们正在将客户端开发工作转向jQuery。虽然您正在尝试做的工作会起作用，但我建议您尝试一下jQuery，除非您正在开发服务器控件。仅供参考-看起来您正在使用Microsoft的客户端库。据微软称，他们正在将客户端开发工作转向jQuery。虽然您正在尝试做的工作会起作用，但我建议您尝试一下jQuery，除非您正在开发服务器控件。是的，除非委托专门返回发送方。Callback允许您返回任何内容，因此，如果您的回调返回发件人本身，则返回相同的内容。事实上，如果两者都需要，可以执行createDelegateCallback。请参阅：是，除非委托专门返回发件人。Callback允许您返回任何内容，因此，如果您的回调返回发件人本身，则返回相同的内容。事实上，如果两者都需要，可以执行createDelegateCallback。见：