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

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

使用一个带有事件参数的小函数表达式，并将其与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);
}

小提琴

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"...