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 相关文章推荐
基于jquery循环map功能的代码
Feb 26 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
浅谈$('div a') 与$('div>a')的区别
Jul 18 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
Vue实现boradcast和dispatch的示例
Nov 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新手上路(八)
2006/10/09 PHP
php.ini 中文版
2006/10/28 PHP
php实现文件下载更能介绍
2012/11/23 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
php实现头像上传预览功能
2017/04/27 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
更改Ubuntu默认python版本的两种方法python-> Anaconda
2016/12/18 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
公积金转移接收函
2014/01/11 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
公务员年终个人总结
2015/02/12 职场文书
导游词之西安骊山
2019/12/03 职场文书