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之解决IE下不渲染的bug
Jun 29 Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
React props和state属性的具体使用方法
Apr 12 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
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
python列表去重的二种方法
2014/02/14 Python
python图书管理系统
2020/04/05 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
车间组长岗位职责
2013/12/20 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年招聘工作总结
2014/12/12 职场文书
公务员考察材料
2014/12/23 职场文书
情人节活动总结范文
2015/02/05 职场文书
安全承诺书格式范本
2015/04/28 职场文书
redis实现排行榜功能
2021/05/24 Redis