Question

我使用EcmaScript6，但不知道如何在类中应用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代码。

Answer 2

感谢您回答我的要求。我有新问题，解决了控制台中的错误，但是当我单击时未应用效果。我在控制台中编写，是的，会自动应用效果，我不知道原因：/。

for (int i = 0; i < keywordString.Length; i++)
{
    char tempChar = keywordString[i];
}

foreach (char character in keywordString)
{
    // As seen above
}

char singleChar = keywordString[0];

如何在类EcmaScript6中使用addEventListener？

2 个答案: