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 学习之旅 (3)
Feb 05 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
JavaScript实现拖拽功能
Feb 11 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 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
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
简单了解python的内存管理机制
2019/07/08 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python list与NumPy array 区分详解
2019/11/06 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
消防验收申请报告
2015/05/15 职场文书
2015小学师德工作总结
2015/07/21 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle