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

来源：互联网发布：学校三级公共卫生网络编辑：程序博客网时间：2024/06/06 03:32

在写跨浏览器的事件处理程序时，遇到这个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；

阅读全文

0 0