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

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

Uncaught TypeError: Cannot read property 'addEventListener' of null

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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;

你可能感兴趣的:(写代码时遇到的问题)