javascript addEventlistener“点击”不起作用答案

【问题标题】：javascript addEventlistener "click" not workingjavascript addEventlistener“点击”不起作用
【发布时间】：2016-02-27 14:58:04
【问题描述】：

我正在制作一个待办事项列表作为 Chrome 新标签扩展。

我的 html 文件：

<head>
</head>

<body>
    <h2 id="toc-final">To Do List</h2>
    <ul id="todoItems"></ul>
    <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;">
    <button id="newitem" value="Add Todo Item">Add</button>

    <script type="text/javascript" src="indexdb.js"></script>
</body>
</html>

以前，按钮元素是带有 onClick() 的输入类型，但 Chrome 不允许这样做。所以我必须制作一个javascript函数，当它被点击时会触发。在我的 indexdb.js 中：

var woosToDo = {};
    window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                    window.mozIndexedDB;

    woosToDo.indexedDB = {};
    woosToDo.indexedDB.db = null;

    window.addEventListener("DOMContentLoaded", init, false);

    window.addEventListener('DOMContentLoaded', function () {
      document.getElementById("newitem").addEventListener("click", addTodo(), false);
    });

...
...

    function addTodo() {
      var todo = document.getElementById("todo");
      woosToDo.indexedDB.addTodo(todo.value);
      todo.value = "";
    }

为什么当我单击带有 id="newitem" 的按钮时没有任何反应？

【问题讨论】：

标签： javascript html dom google-chrome-extension indexeddb

【解决方案1】：

附加函数时，您首先执行它，并将返回值undefined 附加到事件中。去掉括号：

.addEventListener("click", addTodo, false);

当您将addTodo() 作为参数时，您并没有传递函数本身。它做的第一件事是执行函数并使用返回值作为参数。

由于没有return 语句的函数会隐式生成undefined，因此原始代码实际上是在运行该函数，然后附加此：

.addEventListener("click", undefined, false);

【讨论】：

您在控制台中是否收到任何错误，您可以在addTodo 的顶部记录一条消息吗？对于“不起作用”，任何人都无能为力。
addTodo() in addEventListener 将扩展为 function(){ addTodo(); }
@TbWill4321 我很抱歉。我的类函数中还有关于数据库的进一步问题。我让它工作。谢谢你的帮助，括号也是一个问题。为什么addTodo() 不起作用？对不起，如果一个愚蠢的问题，我是 Javascript 的新手。

【解决方案2】：

尝试一个，而不是两个 DOMContentLoaded 听众。

改变这个：

window.addEventListener("DOMContentLoaded", init, false);

    window.addEventListener('DOMContentLoaded', function () {
      document.getElementById("newitem").addEventListener("click", addTodo(), false);
    });

到这里：

window.addEventListener('DOMContentLoaded', function () {
  init();
  document.getElementById("newitem").addEventListener("click", addTodo, false);
});

【讨论】：

【解决方案3】：

对于仍然遇到此错误的人，我的情况是菜单有 li > a

<li> <a class="menu-item">Menu item</a></li>

当我将click 事件绑定到a 时，它不起作用我通过收听来自li 的click 事件并使用e.preventDefault() 来修复它

现在可以了

【讨论】：