如何在ES6-Javascript中与addeventListeners一起使用新绑定？

我正在尝试将addEventlistener添加到具有#addButton id的DOM元素中。我正在ES6中使用新的绑定方法，但这不起作用。如何调用add函数

class ToDoApp {
constructor (settings) {
    if (!settings) {
        throw 'Todo App requires settings object';
    }
    this.addButtonHandler = document.querySelector(settings.addButtonSelector);
    this.addButtonHandler.addEventListener('click', this.add);

}
add = () => {
    console.log('heello');
 }
}

 const myTodo = new ToDoApp({
inputSelector: '#input',
addButtonSelector: '#addButton',
deleteButtonSelector: '#delete',
listContainerSelector: '#list'
});

HTML

任务1

我猜您会遇到这个错误，因为创建newTodo实例时元素不存在。您可能希望对尝试向其添加事件侦听器的按钮进行null检查

class ToDoApp {
    constructor(settings) {
        if (!settings) {
            throw 'Todo App requires settings object';
        }
        this.addButtonHandler = document.querySelector(settings.addButtonSelector);
        if (this.addButtonHandler) {
            this.addButtonHandler.addEventListener('click', this.add);
        } else {
            throw "Element you want to add event listener to doesn't exist";
        }

    }
    add = () => {
        console.log('heello');
    }
}

const myTodo = new ToDoApp({
    inputSelector: '#input',
    addButtonSelector: '#addButton',
    deleteButtonSelector: '#delete',
    listContainerSelector: '#list'
});

---

如果在创建

newTodo

时按钮存在，则工作正常。“不起作用”是什么意思…有错误吗？“ES6中的新绑定方法”-你在说什么？“但这不起作用”-到底什么不起作用？运行此代码时，DOM（html标记）看起来如何？您是否收到任何错误消息？我收到“SyntaxError:当前不支持字段”。还有我的HTML代码如下@这是因为

add=（）=>{

是一个语法错误{在你的构造函数中。我已经解决了这个问题。当我用google chrome打开这个项目时，它工作得很好，但在firefox中它不工作。它给出了语法错误。@SemihÖzden这是因为firefox中还不支持

公共类字段语法

javascript。你可以在这里看到状态：。我你想在所有b中运行这个代码吗rowser，我建议您使用bable进行传输。非常感谢@KaranVerma

class ToDoApp {
    constructor(settings) {
        if (!settings) {
            throw 'Todo App requires settings object';
        }
        this.addButtonHandler = document.querySelector(settings.addButtonSelector);
        if (this.addButtonHandler) {
            this.addButtonHandler.addEventListener('click', this.add);
        } else {
            throw "Element you want to add event listener to doesn't exist";
        }

    }
    add = () => {
        console.log('heello');
    }
}

const myTodo = new ToDoApp({
    inputSelector: '#input',
    addButtonSelector: '#addButton',
    deleteButtonSelector: '#delete',
    listContainerSelector: '#list'
});