在Javascript中将eventlistener添加到对象
Adding eventlistener to object in Javascript
我做了一个待办事项列表的项目,并试图重构它,使其更加面向对象。我很难弄清楚如何制作一个向列表中添加项目的对象。在看了许多不同的例子和类似问题的答案后,这就是我现在所拥有的,但它不起作用。
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实例,它将处理与您的todo列表的任何交互。
此外,不应该由构造函数负责进行事件绑定。因此,我创建了init
函数,它将在整个页面加载后调用。这是匹配事件的一个非常标准的地方(考虑到您没有使用jQuery)。因此,我在TodoList中去掉了action
函数,并附加了todoList
对象的一个函数(它将是处理todo列表内容的对象)来处理所需的事件。
function(e){this.handler.bind(this);}
当调用它时,this
将是单击的DOM元素(按钮),它没有handler
方法。
这一行还有一个拼写错误:this.btn = document.getElemenyById('add');
,它应该是getElementById(…).
我对您的代码做了一些更改。请参阅以下链接: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();
你想做这样的事情吗?
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);
});
<input type="text"/>
<button>Add Item</button>
<ul></ul>
你为什么要把它变成面向对象的?
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- Meteor-将选定窗体中的对象添加到集合中
- 在play2框架中向json对象添加下拉列表项
- 如何在javascript上向数组的对象添加新元素
- JSON到对象数组,并向每个对象添加项
- 如何将一个对象添加到每个对象数组中
- 向Angular作用域对象添加对象数组——TypeError
- CoffeeScript将对象添加到数组中
- 如何从Addon SDK向选项卡对象添加进度侦听器
- 使用ja将对象添加到HTML画布中
- 向通过ReST JSON调用生成的Angular Javascript对象添加方法
- 将新对象添加到本地存储
- 为什么可以'我们在函数体中为函数对象添加属性,就像在javascript中为对象文字添加属性一样
- 使用游标循环将JS对象添加到数组中
- 向调用全局javascript函数的对象添加处理程序
- 将另一个文件中的对象添加到单独文件中的阵列中
- 将对象添加到数组中
- 为新对象添加函数,将对象添加到数组中.理解困难'这'关键字
- sequelize为找到的对象添加值
- 向对象添加新方法和值,同时避免重复