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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
Yii框架登录流程分析
2014/12/03 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python 识别图片中的文字信息方法
2018/05/10 Python
使用numba对Python运算加速的方法
2018/10/15 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python标准库itertools的使用方法
2020/01/17 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
检察官就职演讲稿
2014/01/13 职场文书
生产厂长岗位职责
2014/02/21 职场文书
保护环境标语
2014/06/09 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
教师岗位职责
2015/02/03 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL