Question

我做了一个todo列表的项目，并试图将其重构为更面向对象。我无法弄清楚如何制作一个将项目添加到我的列表中的对象。看了很多不同的例子，并回答了类似的问题，这就是我现在所拥有的，但它没有用。

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();

老实说，我不确定自己到底发生了什么，但我很确定我在event.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>

Answer 1

function(e){this.handler.bind(this);}

调用此方法时，this将是单击的DOM元素（按钮），它没有handler方法。

此行还有一个拼写错误：this.btn = document.getElemenyById('add');，它应该是 getElementById（...）。

Answer 2

这是编写代码的更好方法：

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的实例，它将处理与你的待办事项列表的任何交互。

此外，它不应该是构造函数负责制作事件绑定。因此，我创建了init函数，该函数将在整页加载后调用。这是一个非常标准的地方来举办活动（考虑到你没有使用jQuery）。所以，我删除了TodoList中的action函数，并附加了todoList对象的函数（它将是处理你的待办事项列表内容的对象）来处理所需的事件。

Answer 3

我对您的代码做了很少的更改。请参阅以下链接： http://jsfiddle.net/29ppxpgm/5/

function Todo(){
    this.btn = document.getElementById('add');
    this.item = document.getElementById('item');
    this.list = document.getElementById('list');
    this.handler = function(){
        var el = document.createElement('li');
        var txt = document.createTextNode(this.item.value);        
        el.appendChild(txt);
        this.list.appendChild(el);
    };
    this.action = function(){
        var that = this;
        this.btn.addEventListener('click', function(e){that.handler()}, false);
    };

}

var mine = new Todo（）; mine.action（）;

Answer 4

你想做这样的事吗？

＆＃13;

var input = document.querySelector("input");
var ul = document.querySelector("ul");

document.querySelector("button").addEventListener("click", function () {
    var li = document.createElement("li");
    li.innerHTML = input.value;
    ul.appendChild(li);
});

＆＃13;

<input type="text"/>
<button>Add Item</button>
<ul></ul>

＆＃13;

为什么要使这个面向对象？

在javascript中将eventlistener添加到对象

4 个答案: