Как передать параметр, если пользователь нажимает на ссылку

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

Вы можете прикрепить случайные свойства элементов 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() не обойтись без оговорок.

так, хотя я бы попытаться отговорить вас от него, это делать то, что вы просили с минимальным рефакторингом:

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 переменным, определенные в объеме testPro функции и может 't непосредственно используется функцией 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')); 
}