Day386:写一个通用的事件侦听器函数

[Genzhen]

每日一题会在下午四点在交流群集中讨论，五点前端面试星球小程序中更新答案 欢迎大家在下方发表自己的优质见解

二维码加载失败可点击 小程序二维码

扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。

[specialgirlgotoheaven]

`export const myEvent = { // 页面加载完成后 readEvent: function(fn: any){ if(fn === null || fn === undefined){ fn = document } let oldOnload: any = window.onload; if(typeof window.onload !== "function"){ window.onload = fn } else { window.onload = function(){ oldOnload() fn() } } }, // 页面元素事件绑定 addEvent: function(element:any,type:any,handle:Function){ if(element.addEventListener){ // w3c // 参数分别表示事件类型、需要执行的函数、是否捕捉 element.addEventListener(type,handle,false) } else if(element.attachEvent){ element.attachEvent("on"+type,function(){ handle.call(element) }) } else { element["on"+type] = handle } }, removeEvent: function(element:any,type:any,handle:Function){ if(element.removeEventListener){ element.removeEventListener(type,handle,false) } else if (element.detachEvent){ element.detachEvent("on"+type,handle) } else { element["on"+type] = null } }, stopPropagation: function(ev:any){ if(ev.stopPropagation){ ev.stopPropagation() } else { ev.cancelBubble = true } }, preventDefault: function(ev:any){ if(ev.preventDefault){ ev.preventDefault() } else { ev.returnValue = false } }, // 获取事件目标 getTarget: function(event:any){ return event.target || event.srcElement; }, // 获取event对象的引用，取到事件的所有信息 getEvent: function(e:any){ let ev = e || window.event; if(!ev){ let c = this.getEvent.caller while(c){ ev = c.arguments[0] if(ev && Event === ev.constructor){ break; } c = c.caller } } return ev }

}`

[whenTheMorningDark]

let eventUtils = {
            addEventListener:(ele,type,handler)=>{
                if(ele.addEventListener){
                    ele.addEventListener(type,handler)
                } else if(ele.attachEvent){
                    ele.attachEvent("on"+type,handler)
                } else {
                    ele['on'+type] = handler
                }
            },
            removeEventListener:(ele,type,handler)=>{
                if(ele.addEventListener){
                    ele.removeEventListener(type,handler)
                } else if(ele.attachEvent){
                    ele.detachEvent("on"+type,handler)
                } else {
                    ele['on'+type] = null
                }
            }
        }

[Eddie-Fannie]

`const EventUtils = { // 分别使用dom0||dom2||IE方式 来绑定事件 // 添加事件 addEvent: function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } },

// 移除事件 removeEvent: function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } },

// 获取事件目标 getTarget: function(event) { return event.target || event.srcElement; },

// 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event getEvent: function(event) { return event || window.event; },

// 阻止事件（主要是事件冒泡，因为 IE 不支持事件捕获） stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } },

// 取消事件的默认行为 preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } };`