Как я могу использовать addEventListener в классе EcmaScript6?

Question

Я использую EcmaScript6 и не знаю, как применить addEventListener в классе.Я попытался объявить переменную из класса для вызова метода EventListener и получил ошибку: /.Я также попытался добавить addEventlistener внутри класса, и я не могу.

Ошибки в консоли, потому что я пытаюсь снова новый альтернативный.

Не знаю, решение проблемы.как добавить слушатель события?

<!-- language: lang-js -->
class Design{
transition(clickea, up, down){
    this.clickea = clickea;
    this.up = up;
    this.down = down;
    let cont = 0;
    let focus = document.getElementById(clickea);
    let content = document.getElementById(up);
    let content2 = document.getElementById(down);
    if(cont == 0){
        content.style.transform = "translateY(-1000%)";
        content2.style.transform = "translateY(0%)";
        cont++;
    }else{
        content.style.transform = "translateY(0%)";
        content2.style.transform = "translateY(-100%)";
        cont--;
    }
}
}

const design = new Design();
let enlance = document.getElementById('sign');
enlance.addEventListener('click', desgin.transition(enlance, loguin, 
registro));

Консоль Google

eventos.js:11 Uncaught TypeError: Cannot read property 'style' of null
at Design.transition (eventos.js:11)
at eventos.js:24

или

<!-- language: lang-js -->
class Design{
transition(clickea, up, down){
    this.clickea = clickea;
    this.up = up;
    this.down = down;
    let cont = 0;
    let focus = document.getElementById(clickea);
    let content = document.getElementById(up);
    let content2 = document.getElementById(down);
    focus.addEventListener('click', function(up,down){
        if(cont == 0){
            content.style.transform = "translateY(-1000%)";
            content2.style.transform = "translateY(0%)";
            cont++;
        }else{
            content.style.transform = "translateY(0%)";
            content2.style.transform = "translateY(-100%)";
            cont--;
        }
    });

}

}

const diseño = new Design();
let enlance = document.getElementById('sign');
let loguin = document.getElementById('loguin');
let registro = document.getElementById('registro');
diseño.transition(enlance, loguin, registro);


eventos.js:10 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Design.transition (eventos.js:10)
    at eventos.js:29
transition @ eventos.js:10

Мой вопрос: как я могу использовать слушателя вметод шаблона Class.

Answer 1

Добро пожаловать в Stackoverflow!

Похоже, вы видите эту ошибку, потому что ваш класс ожидает строку, но вы предоставляете порцию DOM.

Ваш код, по сути, делает это ...

document.getElementById(document.getElementById('sign'));

Если вы просто предоставляете строки для transition(), вы должны быть хорошими.

По поводу вашего фактического вопроса

Как я могу использовать addEventListener в классе EcmaScript6?

Класс действительно ничем не отличается от функции, это просто способ хранения данных / функциональности.Вы можете иметь метод класса, который получает часть DOM или добавляет слушателя к части DOM, но вы не можете поместить слушателя непосредственно в класс.Пока он сидит, похоже, что вы даже не пытаетесь это сделать.Ваш класс просто хранит некоторый логический и процедурный DOM-код, который полностью допустим.