流畅地添加事件监听器答案

【问题标题】：Adding Event Listeners Fluently流畅地添加事件监听器
【发布时间】：2014-03-16 18:12:55
【问题描述】：

向我的 html 文档中的元素添加事件侦听器时遇到了困难。我错过了什么？

我总是犯错。

我想完全理解它并流利地使用它。

比如我的新试用；这甚至是来自类似问题的代码，我刚刚将第一个事件更改为“点击”。当我没有说任何关于添加监听器的元素时，它可以工作，而是在整个身体上的点击。

但我在 Mac 上的 Safari 上看到以下错误：

[Error] TypeError: 'null' is not an object (evaluating 'formslink.addEventListener')
    global code (entr1.html, line 21)

代码如下：

<html>
    <head>

    </head>
<script>
    function entranceForms()
    {
        var forms =  document.getElementById('entranceforms');

        if (forms.style.display === null || forms.style.display == 'none')
        {
            forms.style.display = 'block';
        }
        else
        {
            forms.style.display = 'none';

        }
    }
    var formslink=document.getElementById('formslink');
    formslink.addEventListener('click', entranceForms, false);
    var formscancel=document.getElementById('formscancel');
    formscancel.addEventListener('click', entranceForms, false);
    </script>

    <body>
    <p id="formslink">entrance</p>

    <DIV ID='entranceforms' STYLE='display: none; width: 100px; height:100px; border: 1px solid; position: absolute; top: 300px; left: 600px; z-index:1;
           background-color:white; opacity:1.0' >
            <P ID='formscancel'> Cancel </P> </DIV>


    </body>
    </html>

【问题讨论】：

把<script>从<head>放到（之前）<body>标签。
它仍然在说同样的话。
您正试图在元素存在之前访问它们。将您的 <script> 元素作为 body 的最后一个子元素应该可以解决此问题；否则，将整个内容包装到一个函数中，该函数在load（或DOMReady）事件发生时执行。
我看不到任何东西可以将这个问题标记为已解决或您作为回答者。

标签： javascript addeventlistener

【解决方案1】：

你需要一个元素来添加方法。

http://plnkr.co/edit/pgCqxCQ8MGeiahymcCpg?p=info

var elem = document.getElementById('entrancelink');
elem.addEventListener('click', entranceForms, false);

【讨论】：

但我确实拥有它。尽管它现在可以通过将脚本作为主体的子项放在@CBroe 所说的所有 html 中来工作。