两者的用法相似，但两者的 event 参数语法略有不同：

addEventListener（mdn 参考）：

支持所有主流浏览器（FF、Chrome、Edge）

obj.addEventListener('click', callback, false);

function callback(){ /* do stuff */ }

事件列表的addEventListener。

attachEvent（msdn 参考）：

支持 IE 5-8*

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }

事件列表的attachEvent。

参数

对于这两种方法，参数如下：

1. 是事件类型。
2. 是触发事件后要调用的函数。
3. （addEventListener仅）如果为 true，则表示用户希望启动捕获。

解释

这两种方法都用于实现将事件附加到元素的相同目标。
不同之处在于attachEvent它只能用于较旧的三叉戟渲染引擎（IE5+ IE5-8*​​），并且addEventListener是在大多数其他浏览器（FF、Webkit、Opera、IE9+）中实现的 W3 标准。

要获得可靠的跨浏览器事件支持，包括使用 Diaz 解决方案无法获得的规范化，请使用框架。

*IE9-10 支持这两种方法，以便向后兼容。

感谢Luke Puplett指出它attachEvent已从 IE11 中删除。

最小的跨浏览器实现

正如Smitty建议的那样，您可以使用Dustin Diaz addEvent 实现来实现可靠的跨浏览器实现，而无需使用框架：

function addEvent(obj, type, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else if (obj.attachEvent) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() {obj["e"+type+fn](window.event);}
    obj.attachEvent("on"+type, obj[type+fn]);
  }
  else {
    obj["on"+type] = obj["e"+type+fn];
  }
}

addEvent( document, 'click', function (e) {
  console.log( 'document click' )
})

任何人仍然参与这个讨论并且没有找到他们正在寻找的答案结帐：http :
//dustindiaz.com/rock-solid-addevent

这是我为我们这些限制使用框架的人找到的最优雅的解决方案之一。

function addEvent(obj, type, fn) {

    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    } else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
        EventCache.add(obj, type, fn);
    } else {
        obj["on" + type] = obj["e" + type + fn];
    }

}

var EventCache = function() {

    var listEvents = [];
    return {
        listEvents: listEvents,
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        flush: function() {
            var i, item;

            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };

                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };

                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };

                item[0][item[1]] = null;
            };
        }
    };
}();

addEvent(window, 'unload', EventCache.flush);