JavaScript :이 내부 개체 함수 및 바인딩 이벤트 사용

Question

개체가 있고 개체를 초기화 할 때 단추에 함수를 바인딩하고 싶습니다. 그래서

var MyClass = { 
    Click: function() { 
     var a = MyClass; // <---------------------- look here 
     a.Start(); 
    }, 
    Bind: function() { 
     var a = document.getElementById('MyButton'); 
     a.addEventListener('click', this.Click, false); //<---------- and here 
    }, 
    Init: function() { 
     this.Bind(); 
    } 
} 

, 나는 그것을 사용에 새로운 그리고 난 객체 (버튼을 클릭 한 후 수행해야 Click() 함수 내에서) 다음과 같이 선언 할 수 있는지 알고하지 않습니다

가 그것을인가 나쁜 연습? 이 경우 이벤트를 추가 할 때 가장 좋은 방법은 무엇입니까?

편집 :fiddle

Answer 1

첫째 구문 오류가 있습니다. getElementsById()은 getElementById() - 아니요 s이어야합니다. 일단 당신이 그것을 고치면, 당신이 가지고있는 것은 작동하지만, 그것은 실제로 클래스가 아니라 객체입니다. 당신이 새로운 인스턴스를 포함 된 메소드와 변수의 범위를 유지하는 클래스로이를 만들고, 또한 생성 할 않은 경우

, 당신은 이런 식으로 작업을 수행 할 수 있습니다

var MyClass = function() { 
 
    var _this = this; 
 

 
    _this.click = function() { 
 
    _this.start(); 
 
    };  
 

 
    _this.start = function() { 
 
    console.log('Start...'); 
 
    } 
 
    
 
    _this.bind = function() { 
 
    var a = document.getElementById('MyButton'); 
 
    a.addEventListener('click', this.click, false); 
 
    }; 
 
    
 
    _this.init = function() { 
 
    _this.bind(); 
 
    }; 
 
    
 
    return _this; 
 
} 
 

 
new MyClass().init();

<button id="MyButton">Click me</button>

Answer 2

이벤트 리스너를 들어 당신이 사용자가 버튼을 클릭 할 때 실행되는 일부의 .js 코드가하려는 경우 가장 쉽고 가장 좋은 예를 들어, jQuery를 사용하여, 당신은 사용할 수 있습니다 https://api.jquery.com/click/

.js에 얼마나 새로운 지 모르지만 JavaScript 및 jQuery에 대한 codecademy 자습서를 참조해야합니다.

.click() 데모 :

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click