首页 > 代码库 > JS-DOM2级事件对象跨浏览器处理（已封装）
JS-DOM2级事件对象跨浏览器处理（已封装）
1 var eventUill = { 2 //添加事件 3 addHander: function(element, type, handler) { 4 if(element.addEventListener) { 5 element.addEventListener(type, handler, false); 6 } else if(element.attachEvent) { 7 element.attachEvent(‘on‘ + type, handler); 8 } else { 9 element[‘on‘ + type] = handler;10 }11 },12 //移除事件13 removeHander: function(element, type, handler) {14 if(element.removeEventListener) {15 element.removeEventListener(type, handler, false);16 } else if(element.detachEvent) {17 element.detachEvent(‘on‘ + type, handler);18 } else {19 element[‘on‘ + type] = handler;20 }21 },22 //获取到拥有这个事件的标签名称——事件对象（如input）23 getEvent: function(event){24 return event?event:window.event;//注意：返回后需要调用。可配合nodeName，来单独获取到标签的名字。25 },26 //获取事件的类型27 getType: function(event){28 return event.type;//注意：返回后需要调用。29 },30 //获取事件来自于哪个元素31 getElement: function(event){32 return event.target || event.srcElement;33 },34 //阻止、取消事件的默认行为/属性发生35 preventDefault: function(event){36 if(event.preventDefault){37 event.preventDefault();38 }else{39 event.returnValue = http://www.mamicode.com/null;40 }41 },42 //阻止冒泡行为43 stopPropagation: function(event){44 if(event.stopPropagation){45 event.stopPropagation();46 }else{47 event.cancelBubble = true;48 }49 }50 51 52 53 54 }
遇到的小bug总结：
- 封装的库根本找不到，颜色都是灰的，说明代码是错的，通过在js中添加了一个var eventUill = {}，建立了一个对象，html这里调用对象的addHander,
- eventUill找不到，发现，引用外部库的js代码写在来调用库中函数的下边，根据文档流的优先级，说明还没有调出eventUill之前就执行函数了所以出错。那就把调用的外部库写到最上面，让他优先调用。
- addEventLister不对，把ele改成了element，是不是以后写，这里也必须写element呢？全部改成element后变绿了，代码正确。
- 说element为空。那么element接受传过来的参数是空的，但是html中的btn处是没有问题的，我getElementById的代码也没有错。看来是老毛病又犯了。js写在html上面，获取id为btn的按钮，根据文档流，他还没有读到input的时候就去获取，你让他去哪里获取。找不到btn，自然传过去的是undefined。紧接着element就成null了。解决就是加上window。onload=function(所有的js代码)调用id的代码写到html的下边。这也是js习惯上要放到body的后边的理由。
以下是测试时的html文件，DOM2级事件-跨浏览器处理.js就是上面的js源码。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>dom2级事件跨浏览器处理-封装库</title> <script src="DOM2级事件-跨浏览器处理.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById(‘btn‘); eventUill.addHander(btn, ‘click‘, function() { alert(‘点击后通过封装的库辗转调用了这个匿名函数‘); alert(eventUill.getEvent(btn).nodeName); alert(eventUill.getElement(btn)); }); } </script> </head> <body> <input type="button" value="点击" id="btn" /> </body></html>
JS-DOM2级事件对象跨浏览器处理（已封装）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。