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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
npm 语义版本控制详解
Sep 10 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
基于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/10/08 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php桥接模式应用案例分析
2019/10/23 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python中return如何写
2020/06/18 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
文明单位申报材料
2014/12/23 职场文书
电话营销开场白
2015/05/29 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python