如何在类EcmaScript6中使用addEventListener？

Question

我使用EcmaScript6，但不知道如何在Class中应用addEventListener。 我试图从类中声明一个var来调用方法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() ，那应该很好。

关于你的实际问题

如何在类EcmaScript6中使用addEventListener？

类实际上与函数没有什么不同，它只是存储数据/功能的一种方式。 您可以在类上有一个获取一个DOM的方法，或者在一个DOM上添加一个侦听器，但是您不能将侦听器直接放在类上。 现在，它看起来似乎还没有尝试。 您的类仅存储一些完全有效的逻辑和过程DOM代码。