jQuery의 인스턴스에 이벤트 핸들러를 어떻게 바인딩할 수 있나요?
-
02-07-2019 - |
문제
jQuery를 사용하여 Javascript "클래스"의 특정 인스턴스의 "메서드"에 이벤트를 바인딩하려고 합니다.요구 사항은 이벤트 핸들러에서 "this" 키워드를 사용하여 원래 이벤트를 바인딩한 인스턴스를 참조할 수 있어야 한다는 것입니다.
더 자세히 말하자면 다음과 같은 "클래스"가 있다고 가정해 보겠습니다.
function Car(owner) {
this.owner = owner;
}
Car.prototype = {
drive: function() {
alert("Driving "+this.owner+"s car!");
}
}
그리고 예를 들면 다음과 같습니다.
var myCar = new Car("Bob");
이제 내 자동차의 드라이브 "메서드"에 이벤트를 바인딩하여 예를 들어 버튼을 클릭할 때마다 자동차 "클래스"의 myCar 인스턴스에서 드라이브 "메서드"가 호출되도록 하려고 합니다.
지금까지 나는 "메소드"에서 "this" 키워드를 사용하여 인스턴스 멤버에 편안하게 액세스할 수 있는 클로저를 만들기 위해 다음 함수를 사용해 왔습니다.
function createHandler( obj, method ) {
return function( event ) {
return obj[method](event||window.event);
}
}
나는 그것을 다음과 같이 사용했습니다 :
document.getElementById("myButton")
.addEventListener("click", createHandler(myCar,"drive"));
JQuery로 이와 같은 작업을 어떻게 수행합니까?
나는 "this"를 지정된 인스턴스와 연관시키는 것에 대해 구체적으로 묻고 있습니다. 다른 모든 것은 내가 스스로 처리할 수 있습니다.
해결책
익명 함수를 사용하세요.
$("#myButton").click(function() { myCar.drive(); });
다른 팁
이 시도 :
$("#myButton").each(function() {
var $btn = $(this);
$btn.on('click',function(){
// Do whatever you want.
});
});
여기에서는 먼저 다음과 같이 모든 #myButton 요소를 대상으로 하는 루프를 만듭니다(귀하의 예에서는 잘못되었습니다. 대신 Class를 사용해야 합니다).
$(".myButton").each(...
그런 다음 클릭 이벤트 핸들러를 모든 항목에 연결합니다.
제휴하지 않습니다 StackOverflow