如何在類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代碼。