个人中心
gpt4 book ai didi

javascript - 在 Javascript 中向对象添加事件监听器

转载 作者：行者123 更新时间：2023-12-02 16:52:50 24 4
gpt4 key购买 nike

我做了一个待办事项列表项目，并试图将其重构为更加面向对象。我无法弄清楚如何创建一个将项目添加到我的列表中的对象。在查看了许多不同的示例并回答了类似问题之后，这就是我现在所拥有的，但它不起作用。

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/

24 4 0
文章推荐： javascript - 旋转一个简单的立方体两次
文章推荐： powerbi - 从arm模板更新PowerBI工作区集合时出错
文章推荐： maven - 从命令行设置依赖项的版本
文章推荐： Firebase - 新控制台中我的帐户 secret 在哪里？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com