Comment transmettre des paramètres au gestionnaire d’événements ? Lorsque je suis entré en contact avec Javascript pour la première fois, j'ai souvent eu du mal à résoudre ce problème car je n'avais pas une compréhension approfondie des fermetures.
Je rencontre souvent ce genre de problème dans les groupes de discussion, comme suit :
Copiez le code comme suit :
<!DOCTYPE HTML>
<html>
<tête>
<méta charset="utf-8">
<title>Comment transmettre des paramètres au gestionnaire d'événements ? </titre>
</tête>
<corps>
<a href="#" id="aa">Cliquez sur moi</a>
<script type="text/javascript">
varE = {
sur : fonction(el, type, fn){
el.addEventListener?
el.addEventListener(type, fn, false):
el.attachEvent("on" + type, fn);
},
un : fonction(el,type,fn){
el.removeEventListener?
el.removeEventListener(type, fn, false):
el.detachEvent("on" + type, fn);
}
} ;
var v1 = 'jack', v2 = 'lys';
gestionnaire de fonctions (arg1, arg2) {
alerte(arg1);
alerte(arg2);
}
// Comment passer les paramètres v1 et v2 au handler ?
// L'objet événement par défaut sera transmis comme premier paramètre du gestionnaire.
//À l'heure actuelle, la première chose qui apparaît lorsque vous cliquez sur le lien est l'objet événement, et le second n'est pas défini.
E.on(document.getElementById('aa'),'click',handler);
</script>
</corps>
</html>
Comment passer les paramètres v1 et v2 au gestionnaire ? L'objet événement par défaut sera transmis comme premier paramètre du gestionnaire lorsque vous cliquez sur le lien, la première chose qui apparaît est l'objet événement et le second n'est pas défini.
Option 1, l'objet événement n'est pas conservé et transmis comme premier paramètre
Copiez le code comme suit :
gestionnaire de fonctions (arg1, arg2) {
alerte(arg1);
alerte(arg2);
}
E.on(document.getElementById('aa'),'click',function(){
gestionnaire (arg1, arg2);
});
Option 2, conserver l'objet événement comme premier paramètre
Copiez le code comme suit :
gestionnaire de fonctions (e, arg1, arg2) {
alerte(e);
alerte(arg1);
alerte(arg2);
}
E.on(document.getElementById('aa'),'click',function(e){
gestionnaire (e, arg1, arg2);
});
Option 3 : ajouter getCallback à Function.prototype sans conserver l'objet événement
Copiez le code comme suit :
Function.prototype.getCallback = fonction(){
var _this = ceci, args = arguments ;
fonction de retour (e) {
return _this.apply(this || window, args);
} ;
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
Option 4 : ajoutez getCallback à Function.prototype et conservez l'objet événement comme premier paramètre.
Copiez le code comme suit :
Function.prototype.getCallback = fonction(){
var _this = ceci, args = [];
pour(var i=0,l=arguments.length;i<l;i++){
args[i+1] = arguments[i];
}
fonction de retour (e) {
args[0] = e;
return _this.apply(this || window, args);
} ;
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));