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 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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实现小型站点广告管理(修正版)
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python常见字典内建函数用法示例
2018/05/14 Python
详解Python 正则表达式模块
2018/11/05 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
python 如何区分return和yield
2020/09/22 Python
python 模拟登录B站的示例代码
2020/12/15 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
个人委托书格式
2014/04/04 职场文书
物业品质提升方案
2014/06/08 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
法律进社区活动总结
2015/05/07 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书