Como passar parâmetros para o manipulador de eventos? Quando tive contato com Javascript pela primeira vez, muitas vezes enfrentei esse problema porque não tinha um conhecimento profundo de encerramentos.
Muitas vezes encontro esse tipo de problema em grupos de discussão, como segue:
Copie o código do código da seguinte forma:
<!DOCTYPEHTML>
<html>
<cabeça>
<meta charset="utf-8">
<title>Como passar parâmetros para o manipulador de eventos? </título>
</head>
<corpo>
<a href="#" id="aa">Clique em mim</a>
<script type="texto/javascript">
var E = {
em: função(el, tipo, fn){
el.addEventListener?
el.addEventListener(tipo,fn,falso):
el.attachEvent("on" + tipo, fn);
},
un : função(el,tipo,fn){
el.removeEventListener?
el.removeEventListener(tipo,fn,falso):
el.detachEvent("on" + tipo, fn);
}
};
var v1 = 'macaco', v2 = 'lírio';
manipulador de função(arg1,arg2){
alerta(arg1);
alerta(arg2);
}
// Como passar os parâmetros v1 e v2 para o manipulador?
//O objeto de evento padrão será passado como o primeiro parâmetro do manipulador.
//Neste momento, a primeira coisa que aparece ao clicar no link é o objeto de evento, e o segundo é indefinido.
E.on(document.getElementById('aa'),'click',handler);
</script>
</body>
</html>
Como passar os parâmetros v1 e v2 para o manipulador? O objeto de evento padrão será passado como o primeiro parâmetro do manipulador. Ao clicar no link, a primeira coisa que aparece é o objeto de evento e o segundo é indefinido.
Opção 1, o objeto de evento não é retido e passado como o primeiro parâmetro
Copie o código do código da seguinte forma:
manipulador de função(arg1,arg2){
alerta(arg1);
alerta(arg2);
}
E.on(document.getElementById('aa'),'click',function(){
manipulador(arg1,arg2);
});
Opção 2, mantenha o objeto de evento como o primeiro parâmetro
Copie o código do código da seguinte forma:
manipulador de função(e,arg1,arg2){
alerta(e);
alerta(arg1);
alerta(arg2);
}
E.on(document.getElementById('aa'),'click',function(e){
manipulador(e,arg1,arg2);
});
Opção 3: Adicionar getCallback a Function.prototype sem reter o objeto de evento
Copie o código do código da seguinte forma:
Function.prototype.getCallback=função(){
var _this = this, args = argumentos;
função de retorno (e) {
return _this.apply(this || janela, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
Opção 4: adicione getCallback a Function.prototype e mantenha o objeto de evento como o primeiro parâmetro.
Copie o código do código da seguinte forma:
Function.prototype.getCallback=função(){
var _isto = isto, args = [];
for(var i=0,l=argumentos.length;i<l;i++){
args[i+1] = argumentos[i];
}
função de retorno (e) {
args[0] = e;
return _this.apply(this || janela, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));