一、跨浏览器的事件对象

var EventUtil = {

    ///添加事件

    addHandler: function (element, type, handler) {

        if (element.addEventListener) {

            element.addEventListener(type, handler, false);

        } else if (element.attachEvent) {

            element.attachEvent("on" + type, handler);

        } else {

            element["on" + type] = handler;

        }

    },

    //获取事件

    getEvent: function (event) {

        return event ? event : window.event;

    },

    //获取事件元素目标

    getTarget: function (event) {

        return event.target || event.srcElement;

    },

    //取消事件的默认行为

    preventDefault: function (event) {

        if (event.preventDefault) {

            event.preventDefault();

        }

        else {

            event.returnValue = false;

        }

    },

    ///移除事件

    removeHandler: function (element, type, handler) {

        if (element.removeEvenListener) {

            element.removeEvenListener(type, handler, false);

        } else if (element.detachEvent) {

            element.detachEvent("on" + type, handler);

        } else {

            element["on" + type] = null;

        }

    },

    stopPropagation: function (event) {

        if (event.stopPropagation) {

            event.stopPropagation();

        }

        else {

            event.cancelBubble = true;

        }

    }

};

二、右键菜单demo

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <div id="myDiv">

        点击右键

    </div>

    <ul id="myMenu" style="position: absolute; visibility: hidden; background-color: silver;">

        <li><a href="http://baidu.com">baidu.com</a>

        </li>

        <li><a href="http://zhihu.com">zhihu.com</a>

        </li>

    </ul>

    <script src="../Scripts/EventUtil.js"></script>

    <script>

        EventUtil.addHandler(window, "load", function (event) {

            var div = document.getElementById("myDiv");

            EventUtil.addHandler(div, "contextmenu", function (event) {

                event = EventUtil.getEvent(event);

                EventUtil.preventDefault(event);

                var menu = document.getElementById("myMenu");

                menu.style.left = event.clientX + "px";

                menu.style.top = event.clientY + "px";

                menu.style.visibility = "visible";

            });

            EventUtil.addHandler(document, "click", function (event) {

                document.getElementById("myMenu").style.visibility = "hidden";

            });

        })

        EventUtil.addHandler(window, "beforeunload", function (event) {

            event = EventUtil.getEvent(event);

            var message = "您确定要离开当前页";

            event.returnValue = message;

            return message;

        });

    </script>

</body>

</html>

Javascript跨浏览器的事件对象的更多相关文章

  1. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  2. 跨浏览器的事件对象-------EventUtil 中的方法及用法

    什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...

  3. EventUtil——跨浏览器的事件对象

    . 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...

  4. JavaScript跨浏览器绑定事件函数的优化

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

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

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

  6. 封装常用的跨浏览器的事件对象EventUtil

    var EventUtil = { addHandler: function(element,type,handler) { //事件监听 if(element.addEventListener) { ...

  7. 跨浏览器的事件对象EventUtil

    var EventUtil = function(){ /*--addHandler--*/ addHandler:function(element,type,handler){ if(element ...

  8. js实现一些跨浏览器的事件方法

    用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...

  9. 封装常用的Javascript跨浏览器方法

    var EventUntil={ // 跨浏览器的添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListen ...

随机推荐

  1. Java对MySQL数据库进行连接、查询和修改(转)

    Java对MySQL数据库进行连接.查询和修改 0. 一般过程: (1) 调用Class.forName()方法加载驱动程序. (2) 调用DriverManager对象的getConnection( ...

  2. 语义SLAM的数据关联和语义定位（二）Semantic Localization Via the Matrix Permanent

    论文假设和单目标模型 这部分想讲一下Semantic Localization Via the Matrix Permanent这篇文章的一些假设. 待求解的问题可以描述为 假设从姿态\(x\)看到的 ...

  3. 如何获取listview里面的edittext或者RadioGroup的值，涉及到引发的混乱现象

    最近要实现从数据库读数据,该数据对应listview的item布局里面的RadioButton值,并且item布局里面还有EditText的控件. 如何将每一条对应的listview对应值获取出来呢? ...

  4. android-studio开发NDK错误记录:bash: ../../build/intermediates/classes/debug: is a directory

    按照网上很多已有的教程,在用javah生成c的头文件时候报错: Error: no classes specified bash: ../../build/intermediates/classes/ ...

  5. 微信小程序开发--宽为百分百，页面仍可左右滑动

    这段时间小程序开发时,很多时候,希望内容充满整个屏幕(高度.宽度100%),如下图 但是在设置 .followrecords-container{width:100%;} 后发现 手机在横向上虽然页面 ...

  6. Win10家庭版、专业版、企业版、教育版各版本功能区别对照表

    关于Win10系统的版本问题,MS酋长之前曾经分享过Windows10有哪些版本,在这篇文章中简单地介绍了一下Win10各版本的功能区别及适宜用户群,但是并没有对各版本的功能区别做一详细的对比.日前微 ...

  7. CentOS 7下安装Python3.5

    CentOS 7下安装Python3.5 •安装python3.5可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-deve ...

  8. 根据模板导出Excel报表并复制模板生成多个Sheet页

    因为最近用报表导出比较多,所有就提成了一个工具类,本工具类使用的场景为  根据提供的模板来导出Excel报表 并且可根据提供的模板Sheet页进行复制 从而实现多个Sheet页的需求, 使用本工具类时 ...

  9. The Downside of MySQL Auto-reconnect

    A few days ago I was doing some cleanup on a passive master database using the MySQL client. I didn’ ...

  10. Java重要类详解之ArrayList类

    https://blog.csdn.net/shengmingqijiquan/article/details/52634640 一.ArrayList概述 ArrayList 是一个数组队列,相当于 ...