Question

我对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)，因为它给了我错误。我该如何解决这个问题？

非常感谢

Answer 1

使用一个带有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);
}

Answer 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);
  }
}

Answer 3

您可以将随机属性附加到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);
}

FIDDLE

Answer 4

您的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'));
}

Answer 5

你可以重新评估执行范围内的函数以获取闭包，但我建议使用不同的方法，因为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"...

如何在用户单击链接时传递参数

5 个答案: