如何當用戶點擊<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')); 
}