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匿名函数用法分析
Feb 13 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
JavaScript Split()方法
Dec 18 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
javascript数据类型详解
Feb 07 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JavaScript手风琴页面制作
May 17 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vue中使用v-model完成组件间的通信
Aug 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
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript eval函数深入认识
2009/02/21 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python数据挖掘需要学的内容
2019/06/23 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
开业庆典答谢词
2014/01/18 职场文书
高中生物教学反思
2014/02/05 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
中职招生先进个人材料
2014/08/31 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫