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的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
详解vue-router基本使用
Apr 18 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
浅谈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扩展imagick
2014/06/02 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
php框架知识点的整理和补充
2021/03/01 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
Angular路由简单学习
2016/12/26 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python生成随机图形验证码详解
2017/11/08 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python单例模式的多种实现方法
2019/07/26 Python
python tkinter组件使用详解
2019/09/16 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
同事吵架检讨书
2014/02/05 职场文书
颁奖典礼主持词
2014/03/25 职场文书
2015年党总支工作总结
2015/05/25 职场文书
七一活动主持词
2015/06/29 职场文书
初中同学会致辞
2015/08/01 职场文书
干部考核工作总结
2015/08/12 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL