JavaScript 이벤트 핸들러에서 객체를 참조하는 방법은 무엇입니까?

Question

참고 :이 질문은 jQuery 을 사용하지만 질문은 jQuery와 아무런 관련이 없습니다!

var box = new BigBox(); 

이이 객체가 방법 Serialize() 임명했다 :

function AddToPage() 
{ 
    $('#some_item').html("<div id='box' onclick='this.OnClick()'></div>"); 
} 

이 문제는 위입니다

: 여기

box.AddToPage(); 

이 방법 AddToPage()입니다 좋아

그래서이 개체가 this.OnClick() (분명히 작동하지 않음). BigBox 클래스의 멤버를 호출하려면 onclick 처리기가 필요합니다. 어떻게해야합니까?

개체가 이벤트 처리기에서 자신을 어떻게 참조 할 수 있습니까?

Answer 1

인라인 코드와 함께 이벤트 처리기를 추가하지 마십시오.

function AddToPage() 
{ 
    $('#some_item').html("<div id='box'></div>"); 
    $('#box').click(this.OnClick); 
} 

편집 :

또 다른 방법은 (추가 선택을 피할 수) :

function AddToPage() 
{ 
    var div = $('<div id="box"></div>'); // probably don't need ID anymore.. 
    div.click(this.OnClick); 

    $('#some_item').append(div); 
} 

편집 ("어떻게 매개 변수를 전달하기"에 대한 응답으로); 당신은 다음과 같은 마크 업에서 코드 (문제 일의 이전 단락 지을) 분리 할 수 ​​있습니다, jQuery를 사용하는 경우

나는 ..

function AddToPage() 
{ 
    var self = this, div = $('<div></div>'); 
    div.click(function (eventObj) { 
     self.OnClick(eventObj, your, params, here); 
    }); 

    $('#some_item').append(div); 
} 

Answer 2

당신이 전달하려는 어떤 PARAMS 모르겠지만, 이

$(document).ready(function() { 

    var box = new BigBox(); 

    $('#box').click(function() { 
    box.serialize(); 
    }); 

}); 

상자의 ID가있는 모든 div에 한 번만 클릭 핸들러를 추가하면됩니다. 그리고 클릭은 익명의 함수이기 때문에 배치 된 함수의 범위를 가져오고 따라서 상자 인스턴스에 대한 액세스를 가져옵니다.

Answer 3

당신은 jQuery를 사용하여 핸들러를 첨부해야합니다 이벤트 처리기를 강제하기 위해

function AddToPage() 
{ 
    var self = this; 
    $('#some_item').empty().append(
     $("<div id='box'></div>") 
      .click(function() { self.OnClick(someParameter); }) 
    ); 
} 

이 개체의 상황에 호출 할

(그리고 매개 변수를 전달하려면), 당신은 익명 함수를 추가 할 필요가 핸들러를 올바르게 호출합니다. 그렇지 않으면 처리기의 this 키워드가 DOM 요소를 참조합니다.

Answer 4

jQuery 1.4에서 프록시를 사용할 수 있습니다.

가 아니면, 대부분 단순히 모든하지만 아직 지원하지 않는 브라우저에서 구현하는 몇 가지 help을 필요로하는 (그것이 인 ECMAScript 5 판의

var that= this; 
    div.click(function(event) { that.OnClick(event); }); 

:

BigBox.prototype.AddToPage= function() { 
    var div= $('<div>', {id: box}); 
    div.click(jQuery.proxy(this, 'OnClick'); 
    div.appendTo('#some_item'); 
} 

은 또한 수동 폐쇄를 사용할 수 있습니다 기능) :

div.click(this.OnClick.bind(this));