javascript 兼容各个浏览器的事件


Posted in Javascript onFebruary 04, 2015

javascript 兼容各个浏览器的事件

调用事件:

javascript 兼容各个浏览器的事件

事件对象
什么是事件对象?在触发dom上的事件是都会产生一个事件对象event。例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的
dom 事件对象   type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为
IE中的事件对象  type 属性 用于获取事件对象, srcElement属性 用于获取事件目标 cancelBubble属性  用于阻止事件冒泡  设置为true是表示阻止 false表示不阻止
returnValue  属性 用于阻止事件的默认行为 设置为false的时候表示阻止

javascript 兼容各个浏览器的事件

// 兼容各个浏览器  跨浏览器事件处理------- 统一进行封装

var EventHandle = {

    // element : 元素 , type: 点击事件 ,handle : 实行的方法

    //添加句柄

    addEventHandle: function (element, type, handler) {

        if (element.addEventListener) {

            element.addEventListener(type, handler, false);//---false  //代表冒泡 dom2级

        }

        else if (element.attachEvent) {

            element.attachEvent("on"+type, handler);

        } else {

            element["on" + type] = handler;

        }

    },

    //删除句柄  事件处理不起作用

    removeEventHandle: function (element, type, handler) {

        if (element.removeEventListener) {   // 支持dom2级的事件处理  type是 onclick

            element.removeEventListener(type, handler, false); //---false  //代表冒泡

        }

        else if (element.detachEvent) {

            element.detachEvent("on"+type, handler);  //支持IE  

        } else {

            element["on" + type] = null;// dom0级事件处理   传统的点击事件

        }

    },

    //获取事件对象 兼容浏览器的所有对象

    getEvent: function (event) {

        return event ? event : window.event;  //在IE浏览器的低版本中需要的是window.event

    },

    //获取事件类型  是点击呢还是鼠标移动

    getType:function(event){

        return event.type;

    },

    //获取当前的那个元素

    getElement: function (event) {

        return event.target || event.srcElement;

    },

    //阻止事件的默认行为

        : function (event) {

        if (event.preventDefault) {

            event.preventDefault();

        }

        else {

            event.returnValue = false;

        }

    },

    //阻止事件冒泡

    stopPropagation: function (event) {

        if (event.stopPropagation) {

            event.stopPropagation();

        }

        else {

            event.cancelBubble = true;

        }

    }

}
Javascript 相关文章推荐
javascript打开word文档的方法
Apr 16 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
浅谈js中变量初始化
Feb 03 #Javascript
jquery实现submit提交表单
Feb 03 #Javascript
jQuery实现跨域
Feb 03 #Javascript
JavaScript错误处理
Feb 03 #Javascript
js实现右下角提示框的方法
Feb 03 #Javascript
Node.js中child_process实现多进程
Feb 03 #Javascript
jquery实现增加删除行的方法
Feb 03 #Javascript
You might like
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
BootStrap 导航条实例代码
2017/05/18 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python用GET方法上传文件
2015/03/10 Python
Python线程详解
2015/06/24 Python
python异常触发及自定义异常类解析
2019/08/06 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
python 实现波浪滤镜特效
2020/12/02 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
建筑工地质量标语
2014/06/12 职场文书
认真学习保证书
2015/02/26 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis