报错Cannot read property ‘addEventListener‘ of null_vm1130 vendor.js:12 typeerror: cannot read propert-CSDN博客

本文链接：https://blog.csdn.net/chanzhiliao/article/details/119102664

<head>
    <script type="text/javascript">
        var myul = document.getElementById('test-ul');
        var list = document.querySelectorAll('ul li');
        myul.addEventListener('click', function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElemnt;
     
            for(var i = 0, len = list.length; i < len; i++){
                if(list[i] == target){
                    alert(i + "----" + target.innerHTML);
                }
            }
        });
    </script>
</head>
<body>
    <ul id="test-ul">
        <li>index = 0</li>
        <li>index = 1</li>
        <li>index = 2</li>
        <li>index = 3</li>
    </ul>
</body>

原因：脚本在head中，在body还没加载完之前，脚本先加载了，所以找不到监听对象。

解决方法：

一、将脚本放到后面加载

<head>
    
</head>
<body>
    <ul id="test-ul">
        <li>index = 0</li>
        <li>index = 1</li>
        <li>index = 2</li>
        <li>index = 3</li>
    </ul>
    <script type="text/javascript">
        var myul = document.getElementById('test-ul');
        var list = document.querySelectorAll('ul li');
        myul.addEventListener('click', function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElemnt;
     
            for(var i = 0, len = list.length; i < len; i++){
                if(list[i] == target){
                    alert(i + "----" + target.innerHTML);
                }
            }
        });
    </script>
</body>

二、使用window.οnlοad=function(){}，在页面加载完，该方法才被触发

<head>
    <script type="text/javascript">
    window.onload=function(){
        var myul = document.getElementById('test-ul');
        var list = document.querySelectorAll('ul li');
        myul.addEventListener('click', function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElemnt;
     
            for(var i = 0, len = list.length; i < len; i++){
                if(list[i] == target){
                    alert(i + "----" + target.innerHTML);
                }
            }
        });
    }
    </script>
</head>
<body>
    <ul id="test-ul">
        <li>index = 0</li>
        <li>index = 1</li>
        <li>index = 2</li>
        <li>index = 3</li>
    </ul>
</body>