我做了一个待办事项列表项目,并试图将其重构为更加面向对象。我无法弄清楚如何创建一个将项目添加到我的列表中的对象。在查看了许多不同的示例并回答了类似问题之后,这就是我现在所拥有的,但它不起作用。
function Todo(){
this.btn = document.getElementById('add');
this.item = document.getElementById('item').value;
this.list = document.getElementById('list');
this.el = document.createElement('li');
this.el.innerHTML = this.item;
this.handler = function(){
this.list = appendChild(el);
};
this.action = function(){
this.btn.addEventListener('click', function(e){this.handler.bind(this);});
};
}
var mine= new Todo();
mine.action();
老实说,我不确定我遇到了什么困难,但我相当确定 this.action 函数中的 eventListener 本身是错误的。
HTML 如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
</head>
<body>
<h1>ToDo List</h1>
<p>This is a todo list</p>
<ul id='list'>
</ul>
<input id='item'></input>
<button id='add'>Add Item</button>
</body>
</html>
最佳答案
这是编写代码的更好方法:
var TodoList = function() {
this.addTodoItem = function() {
var todoText = document.getElementById('item').value;
var todoUl = document.getElementById('list');
var todoLi = document.createElement('li');
todoLi.innerHTML = todoText;
todoUl.appendChild(todoLi);
};
};
var todoList = new TodoList();
var bindEvents = function() {
document.getElementById('add').addEventListener('click', todoList.addTodoItem);
};
var init = function() {
bindEvents();
// do any other initialization you want
};
window.onload = init;
首先,您的 Todo
构造函数。您将一堆 DOM 元素对象存储为新创建的 Todo 对象(您的 mine
变量)的某些实例的属性。
没有必要这样做。您只是想暂时使用这些元素。因此,请使用局部变量,就像我在 addTodoItem
中所做的那样。
然后我们创建一个 TodoList 实例,它将处理与您的待办事项列表的任何交互。
此外,进行事件绑定(bind)不应该是您的构造函数的责任。因此,我创建了 init
函数,该函数将在整个页面加载后调用。
这是一个非常标准的附加事件的地方(考虑到您没有使用 jQuery)。因此,我删除了 TodoList 中的 action
函数,并附加了 todoList
对象的函数(这将是处理您的待办事项列表内容的对象)处理所需的事件。
关于javascript - 在 Javascript 中向对象添加事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26435656/