[英]How do I add parameters to an event handler in 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”或其他内容。 还要注意的是，我希望能够标识Label的索引（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。
您可以尝试创建一个委托。 例如，带有标签：
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);
}
}
下一步是访问方法处理程序中的通用控件。 使用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;" />
希望能帮助到你 ：）
有很多方法，但是这种方法可以在任何浏览器中完美运行，并且您不需要库。
我将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 将<a>标记的 onclick 事件处理程序更改为带参数的函数？</a>
[英]How, using JavaScript, do I change an <a> tag's onclick event handler to a function with parameters?
Javascript：如何引用拥有事件处理程序的对象？
[英]Javascript: how do I refer to the object which owns the event handler?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.