이벤트 핸들러에 매개변수를 전달하는 방법은 무엇입니까? 처음 Javascript를 접했을 때 클로저에 대한 깊은 이해가 없었기 때문에 이 문제로 종종 어려움을 겪었습니다.
나는 종종 토론 그룹에서 다음과 같은 종류의 문제에 직면합니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="utf-8">
<title>이벤트 핸들러에 매개변수를 전달하는 방법은 무엇입니까? </title>
</head>
<본문>
<a href="#" id="aa">나를 클릭하세요</a>
<스크립트 유형="텍스트/자바스크립트">
변수 E = {
on : 함수(el, 유형, fn){
el.addEventListener?
el.addEventListener(유형, fn, false):
el.attachEvent("on" + type, fn);
},
un : 함수(el,type,fn){
el.removeEventListener?
el.removeEventListener(type, fn, false):
el.detachEvent("on" + type, fn);
}
};
var v1 = '잭', v2 = '백합';
함수 핸들러(arg1,arg2){
경고(arg1);
경고(arg2);
}
// 매개변수 v1 및 v2를 핸들러에 전달하는 방법은 무엇입니까?
//기본 이벤트 객체가 핸들러의 첫 번째 매개변수로 전달됩니다.
//이때, 링크를 클릭하면 가장 먼저 뜨는 것이 이벤트 객체이고, 두 번째는 정의되지 않은 것입니다.
E.on(document.getElementById('aa'),'click',handler);
</script>
</body>
</html>
매개변수 v1 및 v2를 핸들러에 전달하는 방법은 무엇입니까? 기본 이벤트 객체는 핸들러의 첫 번째 매개변수로 전달됩니다. 링크를 클릭하면 가장 먼저 나타나는 것은 이벤트 객체이고 두 번째 것은 정의되지 않습니다.
옵션 1, 이벤트 객체가 유지되지 않고 첫 번째 매개변수로 전달됩니다.
다음과 같이 코드 코드를 복사합니다.
함수 핸들러(arg1,arg2){
경고(arg1);
경고(arg2);
}
E.on(document.getElementById('aa'),'클릭',function(){
핸들러(arg1,arg2);
});
옵션 2, 이벤트 객체를 첫 번째 매개변수로 유지
다음과 같이 코드 코드를 복사합니다.
함수 핸들러(e,arg1,arg2){
경고(e);
경고(arg1);
경고(arg2);
}
E.on(document.getElementById('aa'),'클릭',function(e){
핸들러(e,arg1,arg2);
});
옵션 3: 이벤트 객체를 유지하지 않고 Function.prototype에 getCallback 추가
다음과 같이 코드 코드를 복사합니다.
Function.prototype.getCallback = 함수(){
var _this = this, args = 인수;
반환 함수(e) {
return _this.apply(this || 창, 인수);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
옵션 4: Function.prototype에 getCallback을 추가하고 이벤트 객체를 첫 번째 매개변수로 유지합니다.
다음과 같이 코드 코드를 복사합니다.
Function.prototype.getCallback = 함수(){
var _this = this, args = [];
for(var i=0,l=arguments.length;i<l;i++){
인수[i+1] = 인수[i];
}
반환 함수(e) {
인수[0] = e;
return _this.apply(this || 창, 인수);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));