我对onclick
我有
function testPro(){
codes....
codes....
var test = 'init'; //the test can only be init here...
link.href = '#';
link.innerHTML += 'test value';
link.onclick = onClick;
link.onmouseover = onHover;
link.onmouseout = hoverOut;
codes....
}
function onHover(){
alert(test);
}
我想在用户clicks
按钮时传递测试变量。我不能使用onHover(test)
,因为它给了我错误。我该如何解决这个问题?
非常感谢
答案 0 :(得分:3)
使用一个带有event参数的小函数表达式,并将其与test
值一起传递给onHover
:
var test = …;
link.onclick = function(event) {
return onHover(test, event);
};
// somewhere else (on a higher scope than `test`)
function onHover(arg) {
alert(arg);
}
答案 1 :(得分:2)
也许是这样的:
function makeClickHandler(arg) {
return function (event) {
alert(arg);
}
}
link1.onclick = makeClickHandler('arg1');
link2.onclick = makeClickHandler('arg2');
// ...
要为该按钮增加变量,您可以编写如下的处理程序:
function makeClickHandler() {
var i = 0;
return function (event) {
alert(++i);
}
}
答案 2 :(得分:1)
您可以将随机属性附加到DOM元素:
function testPro(){
var test = 'init';
link.href = '#';
link.innerHTML += 'test value';
link.onclick = onClick;
link.onmouseover = onHover;
link.onmouseout = hoverOut;
link.test = test;
}
function onHover(){
alert(this.test);
}
答案 3 :(得分:1)
您的test
变量在testPro
函数范围内定义,不能由全局范围内调用的onHover
函数直接使用。您有几种方法可以解决此问题:
将test
变量添加到事件处理程序的闭包
function testPro() {
...
var test = 'init';
...
link.onmouseover = function() { return onHover(test); };
...
}
function onHover(test) {
alert(test);
}
或将test
变量放到某个全局可访问的命名空间
var globals = { test: null };
function testPro() {
...
globals.test = 'init';
...
link.onmouseover = onHover;
...
}
function onHover() {
alert(globals.test);
}
或将回调执行绑定到包含test
function testPro() {
...
var scope = { test: 'init' };
...
link.onmouseover = onHover.bind(scope);
...
}
function onHover() {
alert(this.test);
}
或将自定义数据属性添加到DOM元素
function testPro() {
...
link.setAttribute('data-test','init');
...
link.onmouseover = onHover;
...
}
function onHover() {
alert(this.getAttribute('data-test'));
}
答案 4 :(得分:0)
你可以重新评估执行范围内的函数以获取闭包,但我建议使用不同的方法,因为eval()并非没有警告。
所以,尽管我试图说服你,但这样做可以做到你所要求的最小重新分解:
function testPro(){
var test = 'init'; //the test can only be init here...
link.href = '#';
link.innerHTML += 'test value';
link.onclick = eval( "0||"+ onClick);
}
function onClick(){
alert(test);
}
link={};
testPro();
link.onclick(); //shows "init"...