addEventListener 模块模式

Question

我不知道为什么，但是当我点击 "button" 时没有任何反应...

控制台中没有消息，没有错误。如何解决？

JS

var bird = (function(){

    let button    = document.querySelector('#addBird');

    button.addEventListener('click', addBird);

    function addBird()
    {
       console.log('addBird');
    };

    return {
        addBird: addBird
    };
})();

HTML

<button id="addBird">Add Bird</button>

Answer 1

刚刚在 CodePen 中尝试了这个例子：

http://codepen.io/JasonGraham/pen/pbowXz

var bird = (function(){

    let button    = document.querySelector('#addBird');
    button.addEventListener('click', addBird);

    function addBird()
    {
       console.log('addBird');
    };

    return {
        addBird: addBird
    };

})();

据我所知，您的代码似乎按预期工作。在 Chrome 中，单击按钮会导致每次将 "addBird" 消息记录到控制台。

你期待不一样的东西吗？

Answer 2

发生这种情况是因为 JavaScript 在 DOM（基本上是 HTML 标记）准备就绪之前加载。因此，button 变量等于 NULL.

两种解决方法：

将您的 JavaScript 移到页面末尾，就在 </body> 标记之前。
使用 jQuery 的文档就绪函数包装您的 JavaScript 代码：
$(function() { // code here });

Answer 3

好的，如果我在#birdMod 之外插入它就可以工作...所以它不是 .render() 函数。谢谢您的帮助。 :)

addEventListener 模块模式

addEventListener Module Pattern

javascript

revealing-module-pattern