调用事件:

//事件对象
//什么是事件对象?在触发dom上的事件是都会产生一个事件对象event。例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的
//dom 事件对象   type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为
//IE中的事件对象  type 属性 用于获取事件对象, srcElement属性 用于获取事件目标 cancelBubble属性  用于阻止事件冒泡  设置为true是表示阻止 false表示不阻止
//returnValue  属性 用于阻止事件的默认行为 设置为false的时候表示阻止

// 兼容各个浏览器  跨浏览器事件处理------- 统一进行封装
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 兼容各个浏览器的事件的更多相关文章

  1. javaScript之跨浏览器的事件对象

    跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...

  2. Javascript兼容各浏览器的日期转换

    var date = new Date(Date.parse("2015-09-05".replace(/-/g,"/")));'2015-09-05'是无法被 ...

  3. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  4. 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  5. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

  6. JavaScript单线程和浏览器事件循环简述

    JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...

  7. JS获取回车事件(兼容各浏览器)

    一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...

  8. JavaScript 图片的上传前预览(兼容所有浏览器)

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  9. js捕捉浏览器关闭事件-兼容几乎所有浏览器

    很多时候我们都在困扰,如何捕获浏览器关闭事件,网上虽然有很多方法,但都不理想,后来终于找到了一个很好地实现方法,大家可以试试哦,支持几乎所有的浏览器 <script type="tex ...

随机推荐

  1. HDU 4978 A simple probability problem

    A simple probability problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K ( ...

  2. SPOJ GCDEX (数论)

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题意:求sigma (gcd (i , j))  ...

  3. SQL SERVER 2005 请求失败或服务未及时响应

    出现的问题如图所示,在开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server Configuration Manager中,打开 ...

  4. css阴影--box-shadow的用法

    原文:http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边 ...

  5. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  6. 深入char、varchar、text和nchar、nvarchar、ntext的区别详解

    很多开发者进行数据库设计的时候往往并没有太多的考虑char, varchar类型,有的是根本就没注意,因为存储价格变得越来越便宜了,忘记了最开始的一些基本设计理论和原则,这点让我想到了现在的年轻人,大 ...

  7. Android Fragment(碎片)的使用

    简介 在Android中Fragment为一种可以嵌入活动中的UI片段.能让程序更加合理地利用大屏幕的空间. 使用方法 1.我们首先新建的一个onefragment.xml文件. <?xml v ...

  8. 熟悉Git使用

    熟悉Git使用安装git后请修改提交用的用户名和邮箱命令:git config --global user.name "Your Name" git config --global ...

  9. 菜鸟的jQuery源码学习笔记(一)

    整个jQuery是一个自调用的匿名函数: (function(global, factory) { if (typeof module === "object" && ...

  10. Linux下,命令 wget 的使用

    wget是一个从网络上自动下载文件的自由工具.它支持HTTP,HTTPS和FTP协议,可以使用HTTP代理.  所谓的自动下载是指,wget可以在用户退出系统的之后在后台执行.这意味这你可以登录系统, ...