javascript addEventlistener"点击"不起作用

Question

javascript addEventlistener"点击"不起作用

Jas*_*Woo 5 html javascript dom google-chrome-extension indexeddb

我正在制作待办事项列表作为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>

Run Code Online (Sandbox Code Playgroud)

以前,button元素是带有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 = "";
    }

Run Code Online (Sandbox Code Playgroud)

当我点击按钮w/id ="newitem"时为什么没有发生？

Answer 1

TbW*_*321 7

附加函数时,首先执行它,并将返回值附加undefined到事件.删除括号:

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

Run Code Online (Sandbox Code Playgroud)

编辑:解释.

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

由于没有return语句的函数隐式导致undefined,原始代码实际上是在运行函数,然后附加这个:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年前
查看次数：	8184 次
最近记录：	10 年前