在addEventListener中将参数传递给回调函数 [英] Passing arguments to callback function in addEventListener
问题描述
有没有办法将参数传递给
中使用的回调函数addEventListener？
我看到我只能列出回调函数的名称。
例如，我用这个：
var boldLink = document.getElementById（''cmtbold''）;
boldLink.addEventListener（" click"，rBold，true）;
我需要id可以从函数内部访问boldLink
rBold（）
提前致谢。
迪帕克
Janus写道：
有没有将参数传递给内部使用的回调函数的方法
一个addEventListener？
我看到我只能列出回调函数的名称。
例如，我用这个：
var boldLink = document.getElementById（''cmtbold''）;
boldLink.ad dEventListener（" click"，rBold，true）;
我需要从函数内部访问boldLink的id
rBold（）
那么问题出在哪里？在事件处理程序[this]内部指向此处理程序附加到的
元素：
< html>
< ; head>
< title> Untitled Document< / title>
< meta http-equiv =" Content-Type"
含量=" text / html的; charset = iso-8859-1">
< script type =" text / javascript">
function rBold（）{
window.alert（this.id）;
}
函数init（）{
var boldLink = document.getElementById（'' cmtbold''）;
boldLink.addEventListener（" click"，rBold，true）;
}
window.onload = init;
< / script>
< / head>
< body>
< p> < a href =" /" id =" cmtbold">点击我< / a>< / p>
< / body>
< / html>
请注意，IE不支持addEventListener，传统上
使用的attachEvent方法是出于所有其他目的而非
作为替换麻烦对于addEventListener。
addEventListener只应在计划同时由多个对象监听一个
事件时使用。否则使用
传统的内在事件处理程序：
boldLink.onclick = rBold;
谢谢VK。
我不能没有addEventListener，因为我正在创建一个
Greasemonkey用户脚本。
内部事件处理程序赢了'与GM合作。
还有一个问题：
有没有办法传递其他类型的参数？像一个整数？
问候，
迪帕克
VK写道：
Janus写道：
有没有办法将参数传递给
中使用的回调函数addEventListener？
我看到我只能列出回调函数的名称。
例如，我用这个：
var boldLink = document.getElementById（''cmtbold''）;
boldLink.addEventListener（" click"，rBold，true）;
我需要可以从函数内部访问boldLink的id
rBold（）
那么问题出在哪里？在事件处理程序[this]内部指向此处理程序附加到的
元素：
< html>
< ; head>
< title> Untitled Document< / title>
< meta http-equiv =" Content-Type"
含量=" text / html的; charset = iso-8859-1">
< script type =" text / javascript">
function rBold（）{
window.alert（this.id）;
}
函数init（）{
var boldLink = document.getElementById（'' cmtbold''）;
boldLink.addEventListener（" click"，rBold，true）;
}
window.onload = init;
< / script>
< / head>
< body>
< p> < a href =" /" id =" cmtbold">点击我< / a>< / p>
< / body>
< / html>
请注意，IE不支持addEventListener，传统上
使用的attachEvent方法是出于所有其他目的而非
作为替换麻烦对于addEventListener。
addEventListener只应在计划同时由多个对象监听一个
事件时使用。否则使用
传统的内在事件处理程序：
boldLink.onclick = rBold;
Janus写道：
您好，
有没有办法将参数传递给
中使用的回调函数addEventListener？
是，但不是直接。你不应该''传递''参数，而应该考虑让处理程序可以访问它们。很多模式
可用。
[1]让你的变量在处理函数范围链中可用，所以
表示它可以到达并使用它。例如，你可以使用一些全局的
变量。
例如：
---
var foo =" Hello，World！" ;;
obj.addEventListener（
" click"，
函数处理程序（evt）{
alert（foo）;
}，
false
）;
---
[2]遵循相同的想法，但更准确，将你的
处理程序包含在一些本地函数表达式中，它将知道变量的价值
（或检索它的方法）。你可以以功能表达的代价来避免命名空间
污染。
例如：
---
obj.addEventListener（
" click"，
（function（foo）{
return function（ evt）{
alert（foo）;
}
}）（你好，世界！），
false
）;
---
[3]直接在活动目标上添加酒店（作为expando
属性），那么你将能够通过事件处理程序中的''this''值
来检索它。
Ex：
---
obj.foo =" Hello，World！" ;;
obj .addEventListener（
" click"，
函数处理程序（evt）{
alert（this.foo）;
}，
false
）;
---
[4]而不是直接传递处理程序，传递一些实现EventListener接口的对象
。 ''this''值现在将指向此对象，而不是指向EventTarget。然后你可以在这个对象上定义你的expando属性，就像在[3]中一样。请注意，
''this''值解析没有记录，因此在某些浏览器上可能无法工作
（在Firefox和Opera 9中都可以）虽然如此）。
Ex：
---
obj.addEventListener（
点击，
{foo：" Hello，World！"，handleEvent：function（evt）{alert（this.foo）}}，
false
）;
---
HTH，
Elegie。
Hi,
Is there a way to pass arguments to the callback function used inside
an addEventListener?
I see that I can only list the name of the callback function.
For eg, I use this:
var boldLink=document.getElementById(''cmtbold'');
boldLink.addEventListener("click", rBold, true);
I need the id of boldLink to be accessible from inside the function
rBold()
Thanks in advance.
Deepak
Janus wrote:Is there a way to pass arguments to the callback function used inside
an addEventListener?
I see that I can only list the name of the callback function.
For eg, I use this:
var boldLink=document.getElementById(''cmtbold'');
boldLink.addEventListener("click", rBold, true);
I need the id of boldLink to be accessible from inside the function
rBold()So where is the problem? Inside the event handler [this] points to the
element this handler is attached to:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function rBold() {
window.alert(this.id);
}
function init() {
var boldLink=document.getElementById(''cmtbold'');
boldLink.addEventListener("click", rBold, true);
}
window.onload = init;
</script>
</head>
<body>
<p><a href="/" id="cmtbold">Click me</a></p>
</body>
</html>
Please note that IE doesn''t support addEventListener and traditionally
used attachEvent method is made for all other purposes so rather
troublesome as a substitution for addEventListener.
addEventListener should be used only if you are planning to have one
event listened by several objects at once. Otherwise use the
conventional intrinsic event handler:
boldLink.onclick = rBold;
Thanks VK.
I cannot do without addEventListener because I am creating a
Greasemonkey user script.
The intrinsic event handler won''t work with GM.
One more question:
Is there a way to pass other types of parameters? Like an integer?
Regards,
Deepak
VK wrote:Janus wrote:Is there a way to pass arguments to the callback function used inside
an addEventListener?
I see that I can only list the name of the callback function.
For eg, I use this:
var boldLink=document.getElementById(''cmtbold'');
boldLink.addEventListener("click", rBold, true);
I need the id of boldLink to be accessible from inside the function
rBold()
So where is the problem? Inside the event handler [this] points to the
element this handler is attached to:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function rBold() {
window.alert(this.id);
}
function init() {
var boldLink=document.getElementById(''cmtbold'');
boldLink.addEventListener("click", rBold, true);
}
window.onload = init;
</script>
</head>
<body>
<p><a href="/" id="cmtbold">Click me</a></p>
</body>
</html>
Please note that IE doesn''t support addEventListener and traditionally
used attachEvent method is made for all other purposes so rather
troublesome as a substitution for addEventListener.
addEventListener should be used only if you are planning to have one
event listened by several objects at once. Otherwise use the
conventional intrinsic event handler:
boldLink.onclick = rBold;
Janus wrote:
Hello,
Is there a way to pass arguments to the callback function used inside
an addEventListener?Yes, but not directly. Instead of ''passing'' the arguments, you should
rather think about making them accessible to the handler. Many patterns
are available.
[1] Make your variable available in the handler function scope chain, so
that it can reach it and use it. For instance, you could use some global
variable.
Ex:
---
var foo="Hello, World!";
obj.addEventListener(
"click",
function handler(evt){
alert(foo);
},
false
);
---
[2] Following the same idea, but being more precise, enclose your
handler into some local function expression, which will know the value
of the variable (or a way to retrieve it). You avoid namespace
pollution, at a cost of a function expression.
Ex:
---
obj.addEventListener(
"click",
(function(foo){
return function (evt){
alert(foo);
}
})("Hello, World!"),
false
);
---
[3] Add the property directly on the event target (as an expando
property), then you''ll be able to retrieve it through the ''this'' value
in your event handler.
Ex:
---
obj.foo="Hello, World!";
obj.addEventListener(
"click",
function handler(evt){
alert(this.foo);
},
false
);
---
[4] Instead of passing the handler directly, pass some object
implementing the EventListener interface. The ''this'' value will now
point to this object and not to the EventTarget anymore. You can then
define your expando properties on this object, like in [3]. Note that
the ''this'' value resolution is not documented, so it may not be working
on some browsers (it''s okay in Firefox and Opera 9, though).
Ex:
---
obj.addEventListener(
"click",
{foo:"Hello, World!", handleEvent:function(evt){alert(this.foo)}},
false
);
---
HTH,
Elegie.
这篇关于在addEventListener中将参数传递给回调函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
