jquery 선택기를 사용하여 ECMA 6에서 클래스 내에서 이벤트를 정의하는 방법은 무엇입니까?

Question

새 표준 ECMA6을 사용하여 클래스를 정의했으며 모든 클릭 이벤트 및 기타 항목을 클래스에 넣고 싶습니다. 어떻게해야합니까?

class Grid{ 

     constructor(gridOptions) { 
     this.grid_header=''; 
     this.grid_body=''; 
     this.grid=''; 
     this.options=gridOptions; 
     this.cacheDom(); 
     this.bindEvents(); 
     this.buildGrid(); 

     $(".page").on("click", function() { 
       alert("hola"); 
      }); 


     } 

     cacheDom() { 
      this.$greeder = $(this.options.selector); 
     } 

     bindEvents() { 

     } 

     buildGrid(page_number=1){ 


     } 


    } 

편집 : 나는 ...... 나는이 같은 생성자에 이벤트를 정의하기 위해 시도했지만 전혀 작동하지 않았다 몇 가지 기사를 검색하고 그들 중 누구도이 작업을 수행하는 방법을 언급하지했습니다 : 이벤트가 발생할 때마다 클래스에서 메소드를 실행하기를 원합니다.

Answer 1

ES6은 jQuery와 DOM 이벤트 및 이벤트 핸들러의 작동 방식을 변경하지 않습니다.

현재 작동해야하는 항목, 즉 .page 클래스 이름이 있고 특정 코드가 실행될 때 DOM에 존재하는 모든 요소에 대해 클릭 핸들러를 추가해야합니다. 이벤트 바인딩 후에 요소가 동적으로 생성되면 대상 요소가 DOM에 존재하지 않으므로 코드가 작동하지 않습니다. 이벤트 위임을 사용해야합니다.

$('aStaticParentSelector').on('event', '.selector', handler); 

Understanding Event Delegation을 참조하십시오.

클래스가 있고 클래스에 의해 생성 된 요소가있는 경우 클래스 관련 요소를 선택하는 다른 방법을 고려해야합니다.

는

class Foo() { 
    constructor() { 
     this.$el = jQuery('<div class="page">').appendTo('.somewhere'); 
     this.$el.on('click', this.clickHandler.bind(this)); 
    } 

    clickHandler(event) { 
    // `this` keyword refers to the instance 
    // `this.$el` => a jQuery wrapped element 
    // `event.currentTarget` => the DOM element that is wrapped by jQuery in `this.$el` 
    } 
} 

상기 코드는 핸들러의 this 값을 설정 Function.prototype.bind를 이용한다.

ES6 클래스는 문법적 설탕 일 뿐이며 JavaScript OOP 시스템 작동 방식을 근본적으로 변경하지 않습니다.