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 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
vue中如何使用ztree
Feb 06 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Vue代码整洁之去重方法整理
Aug 06 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
收音机的保养
2021/03/01 无线电
php 禁止页面缓存输出
2009/01/07 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Javascript Select操作大集合
2009/05/26 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
javascript工具库代码
2012/03/29 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python星号*与**用法分析
2018/02/02 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
管理学院毕业生自荐信范文
2014/03/10 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
2015年维修工作总结
2015/04/25 职场文书
党员带头倡议书
2015/04/29 职场文书
初中体育教学随笔
2015/08/15 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python