javascript - 如何在 ES6 - Javascript 中使用 new-bind 和 addeventListeners?
问题描述
我正在尝试将 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>
解决方案
我猜您会收到此错误,因为当您创建 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'
});
推荐阅读
- ios - iOS - 检查是否以编程方式启用 Direct Carrier Billing
- javascript - 提交一份表单,将多个文件上传到一个文件夹中
- arrays - 如何在 MATLAB 的数组中匹配 netCDF 变量的值
- google-apps-script - 如何使用谷歌应用脚本在任务列表中查找特定日期的任务
- google-cloud-platform - Cloud Run 是否受冷启动和最大执行长度的限制?
- java - Serenity BDD 入门
- codeigniter-3 - CodeIgniter 突然无法上传图片并说不能为空
- .htaccess - 需要帮助为 HTTPS 正确配置 .htaccess
- android - 如何设置最小进度搜索栏?
- c# - 是否可以在一个 string.join() 中有两个属性以及如何在 WPF 中进行循环?