如何在 ES6 - Javascript 中使用 new-bind 和 addeventListeners？

Question

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

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

<div id="container">
    <div id="imputArea">
        <form action="index.html" method="POST">
            <input type="text" id="input" />
            <input type="button" id="addButton" value="Add" />
        </form>
    </div>
    <div id="listArea">
        <ul id="list">
            <li>
                <input type="checkbox" />
                <p id="task">Task 1</p>
                <input type="button" id="delete" value="X" />
            </li>
        </ul>
    </div>
 </div>

Answer 1

我猜你得到这个错误是因为当你创建一个 newTodo 实例时元素不存在。您可能希望对尝试添加事件侦听器的按钮进行空检查。

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'
});