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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
js canvas实现五子棋小游戏
Jan 22 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获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
基于jquery的商品展示放大镜
2010/08/07 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python实现TF-IDF算法解析
2018/01/02 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
django2笔记之路由path语法的实现
2019/07/17 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
学习经验交流会主持词
2014/04/01 职场文书
校庆标语集锦
2014/06/25 职场文书
工作目标责任书
2014/07/23 职场文书
毕业实习计划书
2015/01/16 职场文书
实习生辞职信范文
2015/03/02 职场文书