纯JavaScript实现的兼容各浏览器的添加和移除事件封装_javascript技巧
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
人工智能驱动的应用程序,用于创建逼真的裸体照片

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
4 周前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保护它?
4 周前
By DDD
两个点博物馆:所有展览以及在哪里可以找到它们
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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