zoukankan      html  css  js  c++  java
  • 常用跨浏览器事件封装

      1 /**
      2  * @author [xiaoruo]
      3  * [EventUtil 跨浏览器事件对象]
      4  * @type {Object}
      5  */
      6 var EventUtil = {
      7     /**
      8      * [addHandler 添加跨浏览器事件]
      9      * @param {[Object]} element [事件对象]
     10      * @param {[String]} type    [事件类型]
     11      * @param {[Function]} handler [事件函数]
     12      */
     13     addHandler: function(element, type, handler) {
     14         if (element.addEventListener) {
     15             element.addEventListener(type, handler, false);
     16         } else if (element.attachEvent) {
     17             element.attachEvent("on" + type, handler);
     18         } else {
     19             element["on" + type] = handler;
     20         }
     21     },
     22 
     23     /**
     24      * [removeHandler 移除事件]
     25      * @param {[Object]} element [事件对象]
     26      * @param {[String]} type    [事件类型]
     27      * @param {[Function]} handler [事件函数]
     28      */
     29     removeHandler: function(element, type, handler) {
     30         if (element.removeEventListener) {
     31             element.removeEventListener(type, handler, false);
     32         } else if (element.detachEvent) {
     33             element.detachEvent("on" + type, handler);
     34         } else {
     35             element["on" + type] = null;
     36         }
     37     },
     38 
     39     /**
     40      * [getEvent 跨浏览器事件]
     41      * @param  {[Object]} event [事件对象]
     42      * @return {[Object]}       [事件对象]
     43      */
     44     getEvent: function(event) {
     45         return event ? event : window.event;
     46     },
     47 
     48     /**
     49      * [getTarget 事件目标]
     50      * @param  {[Object]} event [事件对象]
     51      * @return {[Object]}       [事件目标]
     52      */
     53     getTarget: function(event) {
     54         return event.target || event.srcElement;
     55     },
     56 
     57     /**
     58      * [getRelatedTarget 与事件目标相关的节点]这个属性只对mouseover和mouseout有用(mouseover是离开的那个节点或mouseout时进入的那个节点)
     59      * @param  {[Object]} event [事件对象]
     60     * @return {[Object]}       [相关节点]
     61      */
     62     getRelatedTarget: function(event) {
     63         if (event.relatedTarget) {
     64             return event.relatedTarget;
     65         } else if (event.toElement) {
     66             return event.toElement;
     67         } else if (event.fromElement) {
     68             return event.fromElement;
     69         } else {
     70             return null;
     71         }
     72 
     73     },
     74 
     75     /**
     76      * [preventDefault 取消默认事件]
     77      * @param  {[Object]} event [事件对象]
     78      */
     79     preventDefault: function(event) {
     80         if (event.preventDefault) {
     81             event.preventDefault();
     82         } else {
     83             event.returnValue = false;
     84         }
     85     },
     86 
     87     /**
     88      * [stopPropagation 取消事件的冒泡或捕获行为]
     89      * @param  {[Object]} event [事件对象]
     90      */
     91     stopPropagation: function(event) {
     92         if (event.stopPropagation) {
     93             event.stopPropagation();
     94         } else {
     95             event.cancelBubble = true;
     96         }
     97     },
     98 
     99 
    100     /**
    101      * [getCharCode 获取键盘码]
    102      * @param  {[Object]} event [事件对象]
    103      * @return {[number]}       [键盘码]
    104      */
    105     getCharCode: function(event) {
    106         if (typeof event.charCode == "number") {
    107             return event.charCode;
    108         } else {
    109             return event.keyCode;
    110         }
    111     },
    112 
    113     /**
    114      * [getButton 获取鼠标按键]
    115      * @param  {[Object]} event [事件对象]
    116      */
    117     getButton: function(event) {
    118         if (document.implementation.hasFeature("MouseEvents", "2.0")) {
    119             return event.button;
    120         } else {
    121             switch (event.button) {
    122                 case 0://没有按下按钮
    123                 case 1://按下主鼠标按钮
    124                 case 3://同时按下主次鼠标按钮
    125                 case 5://同时按下主中间
    126                 case 7://同时按下三个
    127                     return 0;//
    128                 case 2://按下了次鼠标按钮
    129                 case 6://同时按下次中间
    130                     return 2;//中间
    131                 case 4://按下鼠标中间按钮
    132                     return 1;//
    133             }
    134         }
    135     },
    136 
    137     /**
    138      * [getWheelDelta 鼠标滚轮事件]
    139      * @param  {[Object]} event [事件对象]
    140      * @return {[Number]}       [鼠标滚轮数值]上滚为正下滚为负
    141      */
    142     getWheelDelta: function(event) {
    143         if (event.wheelDelta) {
    144             return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
    145         } else {
    146             return -event.detail * 40;
    147         }
    148     },
    149 
    150 
    151     /**
    152      * [getClipboardText 获取剪切板数据]
    153      * @param  {[Object]} event [事件对象]
    154      * @return {[String]}       [剪切板数据]
    155      */
    156     getClipboardText: function(event) {
    157         var clipboardData = (event.clipboardData || window.clipboardData);
    158         return clipboardData.getData("text");
    159     },
    160 
    161 
    162     /**
    163      * [setClipboardText 为剪切板赋予数据]
    164      * @param  {[Object]} event [事件对象]
    165      */
    166     setClipboardText: function(event, value) {
    167         if (event.clipboardData) {
    168             event.clipboardData.setData("text/plain", value);
    169         } else if (window.clipboardData) {
    170             window.clipboardData.setData("text", value);
    171         }
    172     }
    173 };

    如果还有什么常用的确没有想到的可以自己再向里面添加。

  • 相关阅读:
    分布式系统(Distributed System)资料
    (转)hive基本操作
    c# 如何通过反射 获取设置属性值、
    安卓webview下使用zepto的swipe失效
    js获取本月、三个月、今年的日期插件dateHelp
    jquery获取form表单内容以及绑定数据到form表单
    JQuery阻止事件冒泡
    javascript-Cookie的应用
    chrome浏览器调试
    JavaScript设计模式之命令模式
  • 原文地址:https://www.cnblogs.com/xiaoruo/p/4479865.html
Copyright © 2011-2022 走看看