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

时间:2013-04-29 21:27:46

标签: javascript

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

非常感谢

5 个答案:

答案 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);
}

FIDDLE

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