JavaScript에서 객체의 프로토 타입에 이벤트 핸들러를 추가하는 방법

Question

var MyObj = function(h,w){ 
    this.height = h; 
    this.width = w; 
} 

이 객체의 모든 인스턴스에 대해 일부 이벤트 핸들러를 등록하고 싶습니다.

예를 들어, 사용자가 버튼을 클릭 할 때 닫기 버튼을 가지고 싶으면 이 특정 객체를 닫아야합니다.

그래서이 객체를 프로토 타입에 추가하여이 객체를 즉석에서 만들 수 있습니다.

Answer 1

이벤트 처리기는 적절한 시간에 호출 될 때 실행되는 함수입니다. 다른 객체 (예 : 버튼)가 이벤트에 응답하여 객체를 닫는 것처럼 들리는 것 같습니다. 이 경우 버튼은 객체가 아닌 이벤트 리스너이므로 버튼의 onclick 핸들러를 객체 인스턴스의 적절한 닫기 함수로 설정하면됩니다. 당신이 정말로 그것을 다른 방법을 비틀 원한다면

, 당신과 같이 정말 간단 뭔가를 할 수 :과 같이 사용되는

var MyObj = function(h,w){ 
    this.height = h; 
    this.width = w; 

    this.close = function(){ /** Do close */ } 
    this.addCloser = function(closebutton){ closebutton.onclick = this.close(); } 
} 

:

var myo = new MyObj(); 
myo.addCloser(document.getElementById('mybutton')); 

그러나, 당신이 원하는 경우 객체가 등록 된 핸들러 함수가 적용된 이벤트를 생성하려면 다음과 같이 좀 더 복잡한 작업을 수행해야합니다.

var MyObj = function(h,w){ 
    this.height = h; 
    this.width = w; 
    this.handlers = {}; 
    this.events = ['close', 'beforeclose']; 

    this.beforeClose = function(){ 
     for(var i = 0, l = this.handlers.beforeclose.length; i < l; i++){ 
      this.handlers.beforeclose[i].call(this); 
     } 
    } 

    this.afterClose = function(){ 
     for(var i = 0, l = this.handlers.close.length; i < l; i++){ 
      this.handlers.close[i].call(this); 
     } 
    } 

    this.close = function(){ this.beforeClose(); /**Do close */ this.afterClose(); } 
    this.registerHandler = function(type, func){ 
     if(this.events.indexOf(type) == -1) throw "Invalid Event!"; 
     if(this.handlers[type]){ 
      this.handlers[type].push(func); 
     } else { 
      this.handlers[type] = [func]; 
     } 
    } 



} 

OR과 같이 사용 할 수있는 무엇이든은 :

var myo = new MyObj(); 
myo.registerHandler('beforeclose', function(){alert("I'm closing!");});