javaScript事件机制兼容【详细整理】


Posted in Javascript onJuly 23, 2016

【添加事件机制】  addEventListener  和  attachEvent

[W3C]

addEventListener('click' , function(){alert('Hello World')} ,false )  //W3C规范添加事件(IE8及以上不兼容);  第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获

[IE]

attachEvent('onclick',function(){alert('Hello World')})  //IE添加事件;  第一个参数为事件类型(需要加on) ; 第二个为事件程序 ; 因为IE只支持事件冒泡,所以只有两个参数

[跨浏览器兼容]

function insertEvent(obj,Event,fun){

if(obj.addEvenListener){

 
 addEventLitener(Event,fun,false)


}else if(obj.attach){



attachEvent('on'+Event,fun)


}


}

【删除事件机制】 removeEventListener  detachEvent

[W3C] removeEventListener

removeEventListener()    //利用addEventListener新增的事件只能通过removeEventListener来删除;

[注意] //以下这种删除事件方式是错误的,因为事件程序必须不能是一个匿名函数

addEventListener('click' , function(){alert('Hello World')} ,false )

removeEventListener('click',function(){alert('Hello World')},false) 

 [解决]

addEventListener('click' , box ,false );

removeEventListener('click',box,false) ;

function box(){

alert('Hello World');

}

[跨浏览器兼容]

function deleteEvent(obj,Event,fun){

if(obj.removeEventListener){



removeEventListener(Event,fun,false);


}else if(obj.detachEvent){



detachEvent('on'+Event,fun)


 }

}

 【阻止特定事件的默认行为】

[preventDefault  和returnValue]

[W3C] preventDefault

[IE]  reutrnValue

[跨浏览器兼容]

function(event){

event=event || window.event;


if(event.preventDefault){



event.preventDefault()


}else{


 event.returnValue=false;


}

}

【获取目标对象】

[target 和 srcElement]

function(event){

event=event || window.event;


if(event.target){



return event.target;


}else if(event.srcElement){



return event.srcElement;


}

 


}

以上这篇javaScript事件机制兼容【详细整理】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 #Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 #Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 #Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 #Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 #Javascript
详细探究ES6之Proxy代理
Jul 22 #Javascript
jquery常用的12个小功能
Jul 22 #Javascript
You might like
php设计模式 State (状态模式)
2011/06/26 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
2009/08/04 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
javascript数组去重小结
2016/03/07 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
浅谈python中的占位符
2017/11/09 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python中按键来获取指定的值
2019/03/02 Python
python操作kafka实践的示例代码
2019/06/19 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
postman和python mock测试过程图解
2020/02/22 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
植物选择:Botanic Choice
2017/02/15 全球购物
寒假思想汇报
2014/01/10 职场文书
清扬洗发水广告词
2014/03/14 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
预备党员入党感想
2015/08/10 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书