如何当用户点击<code>onclick</code></p> <p>链接

Question

我有一个关于参数一个简单的问题传递参数我有

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

您可以将随机属性的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 2

使用小函数表达式，是以事件的说法，并连同传递给它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 3

也许是这样的：

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 4

你可以重新评估该函数在执行的范围抢倒闭，但我会建议使用不同的方法，因为eval（）并非没有警告。

所以，尽管我会试图说服它，你出来，这并做你的要求以最少的重新分解：在范围界定testPro功能

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

Answer 5

你test变量，可以不能直接使用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')); 
}