Javascript 按钮的AddEventListener动态_Javascript_Button

Javascript 按钮的AddEventListener动态
javascript button
Javascript 按钮的AddEventListener动态,javascript,button,Javascript,Button,代码：1给出错误无法调用null的方法'addEventListener'，因为按钮是在脚本代码执行后模板化的代码：1 <html> <script> var button = document.getElementById("buttonid"); button.addEventListener("click", function() { console.log("alert");}); </script> <body>
代码：1给出错误
无法调用null的方法'addEventListener'，因为按钮是在脚本代码执行后模板化的
代码：1
<html>
<script>
    var button = document.getElementById("buttonid");
         button.addEventListener("click", function() { console.log("alert");});
</script>
<body>
    <input type="button" id="buttonid" value="click">
</body>
</html>


var button=document.getElementById（“buttonid”）；
addEventListener（“单击”，函数（）{console.log（“警报”）；}）；

代码：2
<html>
<body>
<input type="button" id="buttonid" value="click">
</body>
     <script>
        var button = document.getElementById("buttonid");
             button.addEventListener("click", function() { console.log("alert");});
     </script>
</html>


var button=document.getElementById（“buttonid”）；
addEventListener（“单击”，函数（）{console.log（“警报”）；}）；

这里的代码是：2正在工作。我希望代码1作为代码2工作。如何解决这个问题
注意：
我不想使用jQuery
问题是，在代码2中调用.getElementById
时，页面的正文内容尚未加载，然后按钮不存在。尝试使用onload事件：
<html>
<body>
<input type="button" id="buttonid" value="click">
</body>
     <script>
        window.addEventListener("load", function () {
            var button = document.getElementById("buttonid");
                 button.addEventListener("click", function() { console.log("alert");});
        });
     </script>
</html>


addEventListener（“加载”，函数（）{
var button=document.getElementById（“buttonid”）；
addEventListener（“单击”，函数（）{console.log（“警报”）；}）；
});
问题在于，当您在代码2中调用.getElementById
时，页面的正文内容尚未加载，因此按钮不存在。尝试使用onload事件：
<html>
<body>
<input type="button" id="buttonid" value="click">
</body>
     <script>
        window.addEventListener("load", function () {
            var button = document.getElementById("buttonid");
                 button.addEventListener("click", function() { console.log("alert");});
        });
     </script>
</html>


addEventListener（“加载”，函数（）{
var button=document.getElementById（“buttonid”）；
addEventListener（“单击”，函数（）{console.log（“警报”）；}）；
});
以下任一项：
将绑定事件侦听器的代码放入函数中，然后在窗口上将该函数绑定为加载
事件侦听器
或
将侦听器绑定到另一个对象（例如文档
），捕获事件对象（第一个参数），然后检查函数中evt.target
的值
要么：
将绑定事件侦听器的代码放入函数中，然后在窗口上将该函数绑定为加载
事件侦听器
或
将侦听器绑定到另一个对象（例如文档
），捕获事件对象（第一个参数），然后检查函数中evt.target
的值
问题是HTML页面是按“原样”解析的，这意味着自上而下，因此脚本在浏览器处理按钮的HTML代码之前执行。因此，对getElementById
的调用将返回null

如果您确实坚持将JavaScript放在页面顶部，则需要在DOM树完全加载（“DOM就绪”）后附加事件处理程序。
但是要小心，旧的浏览器可能不支持该事件（它只是通过HTML5标准化了，尽管旧的Mozilla浏览器已经知道了）

document.addEventListener（'DOMContentLoaded'，函数（ev）{
var button=document.getElementById（“buttonid”）；
按钮。addEventListener（“单击”），函数（）{
控制台日志（“警报”）；
});
}，对）；

请参见JSFIDLE:
问题在于HTML页面是按“原样”解析的，这意味着自上而下，因此脚本在浏览器处理按钮的HTML代码之前执行。因此，对getElementById
的调用将返回null

如果您确实坚持将JavaScript放在页面顶部，则需要在DOM树完全加载（“DOM就绪”）后附加事件处理程序。
但是要小心，旧的浏览器可能不支持该事件（它只是通过HTML5标准化了，尽管旧的Mozilla浏览器已经知道了）

document.addEventListener（'DOMContentLoaded'，函数（ev）{
var button=document.getElementById（“buttonid”）；
按钮。addEventListener（“单击”），函数（）{
控制台日志（“警报”）；
});
}，对）；

请参见JSFIDLE:
为了防止重复，@UweB是正确的。在代码1中，消防命令不正确。脚本正在尝试获取不存在的元素。在代码2中，它工作的原因是相同的，结果正好相反：）为了防止重复，@UweB是正确的。在代码1中，消防命令不正确。脚本正在尝试获取不存在的元素。在代码2中，它工作的原因是相同的，结果正好相反：）2是最首选的方式不一定，它需要为页面上的每次单击触发事件处理程序。如果你有很多，那么每次点击都要做很多处理。2是最可取的方式。不一定，它需要为页面上的每次点击启动事件处理程序。如果你有很多，那么每次点击都要做很多处理。