如何将参数添加到JavaScript中的事件处理程序中？

目前我正在执行代码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); 
...

我如何传递一个参数，将准确地识别发件人的处理程序，并有处理程序使用“这个”什么的。另外值得注意的是，我希望能够识别标签的索引（1,2,3 ...），因为我也必须编辑相应的文本框。例如，Label1_Click的当前实现如下所示：

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

谢谢，你们。

来源

2010-08-24 Freakishly

仅供参考 - 它看起来像你正在使用微软的客户端库。据MS称，他们正在将其客户端开发工作转向jQuery（http://stephenwalther.com/blog/archive/2010/03/16/microsoft-jquery-and-templating.aspx）。虽然你试图做的事情会起作用，但我会建议给jQuery一个镜头，除非你正在开发一个服务器控件。 – dana 2010-08-24 17:52:40

嗯，$ addHandlers可以帮助加快添加处理程序的过程...还有，在JS，你可以通过做杂附加数据对象：Label1的[“somenewproperty”] =值;所以你可以附加一定的属性和事件处理程序检查......，它占用资源的，所以要小心你做了多少本...

在一定程度上，JS应该是怎样知道的对象你想听听对象在什么顺序，以减少代码量？也许存储一个文本框和标签数组，并通过索引引用这些对象，但在某种程度上，你无法摆脱某些管道代码。

HTH。

来源

2010-08-24 17:36:19

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

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

function LabelClick(sender) 
{ 
/.. 
}

来源

2010-08-24 17:44:44 Gary

是类似于回调？我正在考虑玩这个... – Freakishly 2010-08-24 17:57:55

是的，除了委托专门返回发件人。回调可以让你返回任何东西（所以如果你的回调函数返回发送者本身，那么它是同样的东西）。事实上，如果你同时需要，你可以做createDelegateCallback。请参阅：http://blogs.lotterypost.com/speednet/2008/5/aspnet-ajax-client-library-combining-create.htm – Gary 2010-08-24 18:06:43

我知道这是一个老问题，但在昨天，我面对这同一个问题，这里是我来到与解决方案。

我不喜欢它很多，但没有找到一个更简单的方法：我使用自定义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;" />

希望它能帮助:)

来源

2012-03-17 08:59:43

的方法有很多，但是这一个完美的作品在任何浏览器，你不需要一个图书馆。

我附加一个onclick处理程序到这个页面上的每个输入，并给它2个参数，我从一个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>

来源

2012-03-17 09:25:26 Tom

如何将参数添加到JavaScript中的事件处理程序中？

回答

相关问题