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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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通用防注入程序 推荐
2011/02/26 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php上传大文件设置方法
2016/04/14 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
tween.js缓动补间动画算法示例
2018/02/13 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
matplotlib设置legend图例代码示例
2017/12/19 Python
python列表的增删改查实例代码
2018/01/30 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
大专自我鉴定范文
2013/10/01 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
创意婚礼策划方案
2014/05/18 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
故宫导游词
2015/01/31 职场文书
入伍通知书
2015/04/23 职场文书
紧急迫降观后感
2015/06/15 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
Python如何配置环境变量详解
2021/05/18 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server