手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >纯JavaScript实现的兼容各浏览器的添加和移除事件封装
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
摘要://事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做//定义一个处理事件的对象,兼容各种浏览器,dom...

//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型 //除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型 //如果是非IE浏览器添加事件为:addEventListener element.addEventListener(type,handler,false); }else if (element.attachEvent) { //如果为IE浏览器,添加事件采用 attachEvent element.attachEvent('on'+type,handler); }else{ element['on'+type] = handler; } }, removeEvent:function(element,type,handler){ if (element.removeEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型 //除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型 //如果是非IE浏览器添加事件为:removeEventListener element.removeEventListener(type,handler,false); }else if (element.detachEvent) { //如果为IE浏览器,添加事件采用 detachEvent element.detachEvent('on'+type,handler); }else{ //dom0级事件处理,如果删除事件采用赋值null element['on'+type] = null; } }, getEvent:function(event){ //获取事件本身 return event?event:window.event; }, getType:function(event){ //获取事件类型 return event.type; }, getElement:function(event){ //获取事件作用元素 return event.target || event.srcElement; }, preventDefault:function(event){ //阻止默认的事件行为 if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopProPagation:function(event){ //停止事件冒泡 if(event.stopProPagation){ event.stopProPagation(); }else{ event.cancelBubble = true; } } }

【纯JavaScript实现的兼容各浏览器的添加和移除事件封装】相关文章:

用JavaScript实现页面重定向功能的教程

JS实现浏览器菜单命令

JavaScript实现添加、查找、删除元素

javascript实现动态改变层大小的方法

JavaScript实现表格点击排序的方法

纯javascript实现四方向文本无缝滚动效果

JavaScript实现的MD5算法完整实例

Javascript实现div层渐隐效果的方法

JavaScript实现鼠标拖动效果的方法

JavaScript实现广告的关闭与显示效果实例

精品推荐
分类导航