首页 web前端 js教程 纯JavaScript实现的兼容各浏览器的添加和移除事件封装_javascript技巧

纯JavaScript实现的兼容各浏览器的添加和移除事件封装_javascript技巧

May 16, 2016 pm 04:07 PM
javascript 事件 兼容 封装 浏览器 添加 移除

//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做
 
 //定义一个处理事件的对象,兼容各种浏览器,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;
    	  }
    }




 }
登录后复制
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML中emsp空格宽度不一致,如何可靠地实现文本缩进? HTML中emsp空格宽度不一致,如何可靠地实现文本缩进? Apr 04, 2025 pm 11:57 PM

关于HTML中emsp空格与汉字宽度不一致的问题许多网页教程中提到 占据一个汉字的宽度,然而实际情况并非...

如何在渐变背景的卡券布局上实现缺口效果? 如何在渐变背景的卡券布局上实现缺口效果? Apr 05, 2025 am 07:48 AM

实现卡券布局的缺口效果在设计卡券布局时,常常会遇到需要在卡券上添加缺口的需求,尤其是在背景为渐变色...

如何使用CSS的clip-path属性实现分段器的45度曲线效果? 如何使用CSS的clip-path属性实现分段器的45度曲线效果? Apr 04, 2025 pm 11:45 PM

如何实现分段器的45度曲线效果?在实现分段器的过程中,如何让点击左侧按钮时右侧边框变成45度曲线,而点�...

如何使用CSS和JavaScript选择并设置第一个特定类的元素的样式? 如何使用CSS和JavaScript选择并设置第一个特定类的元素的样式? Apr 04, 2025 pm 11:33 PM

如何使用CSS和JavaScript选择并设置第一个特定类的元素的样式?在Web开发中,经常会遇到需要选择并修改特定类�...

CSS字体渐变效果如何实现? CSS字体渐变效果如何实现? Apr 04, 2025 pm 10:12 PM

实现CSS字体渐变效果许多开发者都希望在网页中实现炫酷的字体渐变效果,本文将详细讲解如何使用CSS3实现图�...

如何使用JavaScript区分关闭浏览器标签页和关闭整个浏览器? 如何使用JavaScript区分关闭浏览器标签页和关闭整个浏览器? Apr 04, 2025 pm 10:21 PM

如何在浏览器上使用JavaScript区分关闭标签页和关闭整个浏览器?在日常使用浏览器的过程中,用户可能会同时�...

Vue2项目线上iframe白屏:如何排查和解决? Vue2项目线上iframe白屏:如何排查和解决? Apr 05, 2025 am 06:21 AM

Vue2项目中iframe线上白屏的排查与解决在Vue2项目开发中,我们经常会使用iframe来嵌入其他网页内容。然而,将项�...

如何获取58同城工作页面上的实时申请和浏览人数数据? 如何获取58同城工作页面上的实时申请和浏览人数数据? Apr 05, 2025 am 08:06 AM

如何在爬虫时获取58同城工作页面的动态数据?在使用爬虫工具爬取58同城的某个工作页面时,可能会遇到这样�...

See all articles