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 相关文章推荐
用jquery生成二级菜单的实例代码
Jun 24 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
Node.js插件安装图文教程
May 06 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue计算属性get和set用法示例
Feb 08 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
js实现简单的打印表格
Jan 15 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
入党积极分子思想汇报
2014/01/02 职场文书
班班通项目实施方案
2014/02/25 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
图书馆标语
2014/06/19 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
初三化学教学反思
2016/02/22 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
MySQL创建管理HASH分区
2022/04/13 MySQL