如何在 EcmaScript6 类中使用 addEventListener？答案

【问题标题】：How can I use addEventListener in Class EcmaScript6?如何在 EcmaScript6 类中使用 addEventListener？
【发布时间】：2023-03-20 01:14:02
【问题描述】：

我使用 EcmaScript6，但不知道如何在类中应用 addEventListener。我尝试从 Class 中声明一个 var 来调用 EventListener 方法并得到一个错误：/。我也在 Class 中尝试了 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));

谷歌控制台

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

我的问题是，如何在模板方法类中使用监听器。

【问题讨论】：

你在调用事件回调，你需要传入一个函数引用。
首先，如果你想设置这样的事件监听器，那么你对design.transition(...)的调用必须返回一个函数。其次，你需要决定你的参数是什么。在第二个示例中，您正在调用document.getElementById(clickea)，但clickea 已经是一个元素，即document.getElementById('sign')。
您所描述的与类无关。您错误地使用了addEventListener 和getElementById，如果您不使用类，您也会遇到同样的问题。在第一种情况下，您调用的是函数而不是传递它做addEventListener。在第二种情况下，您将一个不是字符串的值传递给getElementById，因此getElementById 返回null。
示例代码：jsfiddle.net/khrismuc/mevycbzh

标签： javascript class ecmascript-6

【解决方案1】：

欢迎来到 Stackoverflow！

您看到此错误似乎是因为您的类需要一个字符串，但您提供的是一个 DOM 块。

您的代码本质上就是这样做的......

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

如果您只是向transition() 提供字符串，您应该很好。

关于你的实际问题

如何在 EcmaScript6 类中使用 addEventListener？

类实际上与函数没有什么不同，它只是一种存储数据/功能的方式。你可以在类上有一个方法来获取一块 DOM 或添加一个侦听器到一块 DOM，但你不能直接在类上放置一个侦听器。就目前而言，看起来您甚至都没有尝试这样做。您的类只是存储了一些完全有效的逻辑和程序 DOM 代码。

【讨论】：