JavaScript DOM2级 addEventListener 可能出现引用不到的情况

DOM2级的事件侦听函数是一个非常方便的函数，但是相对于DOM级的事件侦听

var dom1 = document.getElementById("xx").onclick = function(){  //DOM1的事件侦听
    //do something
};
var dom2 = document.getElementById("xx").addEventListener("click",function(){},false);//DOM2事件侦听

DOM1级的事件侦听如果放在head标签内需要把事件侦听的代码放在 window.onload 里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        window.onload = function (){
            var dom1 = document.getElementById("btn").onclick = function(){  //DOM1的事件侦听
                //do something
                alert("you can alert");
            };
        }


    </script>

</head>
<body>
<p id="btn"> touch me</p>

</body>
</html>

此时可以弹出对话框

JavaScript DOM2级 addEventListener 可能出现引用不到的情况

如果去掉windows.onload

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

            document.getElementById("btn").onclick= function () {
                alert("dd");
            }


    </script>

</head>
<body>
<p id="btn"> touch me</p>

</body>
</html>

此时无论如何点击都无法出发，原因是并没有加载body的元素，就算了添加onlick语句也无法触发。

所以可以尝试把代码放在添加的p元素的下面

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<p id="btn"> touch me</p>
<script type="text/javascript">//放在添加p元素的下面


    var dom1 = document.getElementById("btn").onclick = function(){  //DOM1的事件侦听
        //do something
        alert("you can alert");
    };



</script>

</body>
</html>

尤其注意要在引用元素下面添加不然同样无法触发函数

因此可以由此猜想，JavaScript加载的时候是同步进行的，html从上到下开始加载，加载到JavaScript语言的时候，如果代码里面的引用的元素没有加载出来就会出现添加事件失败。

对比DOM2级的事件侦听函数，它也一样，如果放在加载元素的前面是无法添加事件侦听的，除非添加到window.onload里面去或者放在引用元素的后面。

那么如果是加载js文件的话是否会出现一样的情况呢？我们来试一试。

我们先试试没有添加到window.onload的js文件

新建一个js文件命名为EventListern.js 在文件内添加一下语句

var handle = function(){
    alert("11");
}
var dom2 = document.getElementById("btn").addEventListener("click",handle,false);

在html文件添加引用语句

<script type="text/javascript" src="EventListener.js"></script>//加载外部JS

Tips:平时做工程的时候最好做好文件分类，js文件放在一个文件下，这里为了方便就不做了

运行看看

JavaScript DOM2级 addEventListener 可能出现引用不到的情况无法触发

我们在文件内添加 window.onload

var handle = function(){
    alert("11");
}
window.onload = function () {
    var dom2 = document.getElementById("btn").addEventListener("click",handle,false);
}

JavaScript DOM2级 addEventListener 可能出现引用不到的情况

正常触发

如果不添加，把js文件放在引用元素的下面的话，是否可以触发呢？我们试一试

<p id="btn"> touch me</p>
<script type="text/javascript" src="EventListener.js"></script>//放到p元素下面加载JS

把EventListen.js的window.onlaod去掉

JavaScript DOM2级 addEventListener 可能出现引用不到的情况

也是也可以触发的

所以无论是内部还是外部加载代码，都需要注意是否先引用了还没有加载出来的元素。

所以在引用元素的时候，是否会出现引用了还没有加载的元素，再看看是否需要添加window.onload

现在我还是个前端入门，所以应该有一些很好的库帮助加载js文件，我暂时还没接触，如果有大神看到了，可以给点建议

如果以上有不对的地方，请指教。

多多讨论，互相学习才能更快的进步，继续前进吧。