클래스의 인스턴스에서 이벤트 리스너에 액세스하려면 어떻게합니까?

콜백을 등록하고 이벤트를 기반으로 반복하는 이벤트 처리기를 만들려고합니다. 클래스의 인스턴스에서 이벤트 리스너에 액세스하려면 어떻게합니까?

var elt = document.getElementById("square"), 
     clickCount = 0; 

    // call a priviledged method with access to prviate vars from 
    // outer scope 
    var count = function() { 
    clickCount += 1; 
    alert("you clicked me " + clickCount + " times!"); 
    }; 

    elt.addEventListener("click", count, false);

지금 나는 실제로 내가 사용할 수있는 JS 뭔가를 쓰고 싶은 :

일찍, 예를 작동하면이 같은 것입니다.

<html> 
<body> 
<div style="width:50px; height:50px; background-color:red;" id="square"> 
</div> 
</body> 
</html>

내 질문

은 다음과 같습니다 :

방법이 그렇게 구성해야

//Create a class object 
function CountMe() { 

//privately scoped variables 
    var clickCount = 0; 

//methods on 'class' CountMe 
    this.countClick = function() { 
    //who's context am I in? 
    this.addCount(); 
    alert("you clicked me " + clickCount + " times!"); 
    }; 

    this.addCount = function() { 
    clickCount += 1 
    }; 
}; 

// Create an instance of countMe class 
var clickMe = new CountMe(); 

//Add an event listener for clicks 
document.getElementById("square").addEventListener("click", clickMe.countClick ,false)

I 나타나는 오류이 같은 HTML 페이지 감안할 때 Uncaught TypeError: Object #<CountMe> has no method 'addEventListener' 입니다 : 여기에 현재 구성입니다 onclick 이벤트는 첫 번째 메소드에서와 같이 작동합니까?

countClick 메서드에서 중첩 된 컨텍스트는 무엇입니까? CountMe 클래스의 인스턴스는 의심 스럽지만 다른 사람이 가져 가고 싶습니다. obcously 이유입니다

출처

2012-06-28 rhodee

How should this be constructed so onclick events function as they do in the first method?

Uncaught TypeError: Object # has no method 'addEventListener'

var clickMe = new CountMe(); 
document.getElementById("square").addEventListener("click", clickMe.countClick, false);

변수 elt이 같은 제대로 댓글, 개인 범위이며, 외부에서 액세스 할 수 없습니다 : 당신은 예를 들어 할 수 있도록, DOM 요소에 이벤트 listenere를 추가해야합니다. 즉, add-process를 생성자로 이동하거나 (요소가 결정 가능한 경우) 그냥 삭제해야합니다.

In the method countClick what context is the nested this in? The instance of the CountMe class I suspect, just want someone else's take.

전화에 따라 다릅니다. 코드

clickMe.countClick();

인스턴스로 clickMe 상황에 맞는 것이지만, 함수가 이벤트 리스너로 호출 할 때 DOM 요소는 상황이 될 것입니다. this keyword에 대한 MDN 개요를 참조하십시오. 클로저 범위 변수를 사용하여 실제 인스턴스에 대한 참조를 보유 할 수 있습니다 (예 : here). 이에 대한 많은 질문이 있습니다.

세 가지 가능한 빠른 수정 :

domel.addEventListener("click", clickMe.countClick.bind(clickMe), false)
domel.addEventListner("click", function(){clickMe.countClick();}, false)
var that=this; this.countClick=function(){ that.addCount(); alert(); };

출처

2012-06-28 22:07:48 Bergi

나는 링크를 봐 줄 것이다. 내 코드 예제를 업데이트했는데 이제 다음 오류가 발생합니다. 'Uncaught TypeError : Object # 에는'addCount '메소드가 없습니다. 당신은 당신의 의견에 기초하여 작동하는 대답을 만들 수 있습니까? – rhodee

그렇습니다. 이제 컨텍스트가 CountMe 인스턴스가 아닌 DivElement 인 문제/기능입니다. – Bergi

나는 가능한 해결책을 간략히 설명했다. 문제에 대해 읽었을 때 아마 당신 스스로 발견하고 이해했을 것이다. – Bergi

클래스의 인스턴스에서 이벤트 리스너에 액세스하려면 어떻게합니까?

답변

관련 문제