js事件处理程序 Uncaught TypeError: Cannot read property 'addEventListener' of null

程序员文章站 2022-03-27 12:37:22

...

在写跨浏览器的事件处理程序时，遇到这个bug：

Uncaught TypeError: Cannot read property 'addEventListener' of null

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

<button class="btn">跨浏览器的事件处理程序</button>

<script>
    var btn = document.getElementById('btn');
    var handler = function () {
        alert('clicked');
    };

    var EventUtil = {
        addHandler : function (element, type, handler) {
            if (element.addEventListener) { // DOM2级 事件处理程序
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler); // IE 事件处理程序
            } else {
                element['on' + type] = handler;  // DOM0级 事件处理程序
            }
        },
        removeHandler : function (element, type, handler) {
            if (element.addEventListener) { // DOM2级 事件处理程序
                element.removeEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.detachEvent('on' + type, handler); // IE 事件处理程序
            } else {
                element['on' + type] = null;  // DOM0级 事件处理程序
            }
        }
    };
    EventUtil.addHandler(btn, 'click', handler);
</script>
</body>
</html>

意思是，不能读取 null 中的 addEventListener 属性。
由上面的代码可以看到，获取 button 元素时，使用的是 getElementByIDd，而HTML中buttont 添加的是的是 class 属性，所以脚本中的 btn 变量是 null；

js事件处理程序 Uncaught TypeError: Cannot read property 'addEventListener' of null

echarts-all.js:1 Uncaught TypeError: Cannot read property 'getAttribute' of null

Uncaught TypeError: Cannot read property 'addEventListener' of null

js事件处理程序 Uncaught TypeError: Cannot read property 'addEventListener' of null

网页html错误：Uncaught TypeError: Cannot read property 'addEventListener' of null