兼容性问题
1、ele.on事件类型 = function(){}一个元素ele注册一种事件多次，会被替换成最后一个，所以有局限性
2、addEventListener(事件类型,事件处理函数,useCapture) 第三个参数默认是false，冒泡阶段执行
3、attachEvent(事件类型，事件处理函数)
4、addEventListener、attachEvent在IE兼容性问题上正好可以互补
基本函数封装
<script> ???//封装成函数，问题是每次都会判断 ???function registeEvent(target, type, handler) { ???????if (target.addEventListener) { ???????????target.addEventListener(type, handler) ???????} else if (target.attachEvent) { ???????????target.attachEvent("on" + type, handler) ???????} else { ???????????target["on" + type] = handler; ???????} ???}</script>在注册事件的时候，判断浏览器的注册事件的方式，然后直接使用该方式进行注册事件，就像上面那样，代码复用性差
解决方案：
1、将注册事件的代码封装到一个函数中，在函数中返回函数，让外部函数只执行一次，判断也就只会执行一次
2、外部函数只需要调用一次就可以知道客户浏览器的兼容方式是什么，然后利用这次返回的函数，注册事件，可以重复的注册
<script> ???function createEventRegister(){ ???????if(window.addEventListener){ ???????????return function(target, type, handler){ ???????????????target.addEventListener(type,handler); ???????????} ???????}else if(window.attachEvent){ ???????????return function(target, type, handler) { ???????????????target.attachEvent("on" + type, function(){ ???????????????????handler.call(target, window.event); ???????????????}) ???????????} ???????}else{ ???????????return function(target, type, handler) { ???????????????target["on" + type] = handler; ???????????} ???????} ???} ???window.onload =function () { ???????var div = document.getElementById("div1"); ???????registeEvent(div,"click",function(e){ ???????????console.log(e); ???????????console.log(this); ???????}) ???}</script>需要注意的是IE6的时候只能使用attachEvent来解决兼容性问题，但是attachEvent，是不能够在注册的函数中传入的参数event对象的，它的访问形式都是window.event，此时我们可以使用call方法，修改传入参数handler函数，将它的参数强行注入进去。
JS高级——封装注册事件
原文地址：https://www.cnblogs.com/wuqiuxue/p/8366044.html