zoukankan      html  css  js  c++  java
  • 跨浏览器的事件对象(EventUtil)

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     5     <title>test03</title>
     6 </head>
     7 <body>
     8     <a target="_blank" href="http://www.google.com/" id="myLink">google</a>
     9     <input type="button" id="myBtn" value="click me" />
    10     <div id="myDiv" style="background:red;height:100px;100px;">Move the mouse from here to the white</div>
    11     <input type="text" id="myText" />
    12     <script type="text/javascript" src="eventutil.js"></script>
    13     <script type="text/javascript" src="eventutil_fn.js"></script>
    14 </body>
    15 </html>
     1 var EventUtil = {
     2     addHandler: function(element, type, handler) {
     3         if (element.addEventListener) {
     4             element.addEventListener(type, handler, false);
     5         } else if (element.attachEvent) {
     6             element.attachEvent("on" + type, handler);
     7         } else {
     8             element["on" + type] = handler;
     9         }
    10     },
    11     getEvent: function(event) {
    12         return event ? event : window.event;
    13     },
    14     getTarget: function(event) {
    15         return event.target || event.srcElement;
    16     },
    17     getRelatedTarget: function(event) {
    18         if (event.relatedTarget) {
    19             return event.relatedTarget;
    20         } else if (event.toElement) {
    21             return event.toElement;
    22         } else if (event.fromElement) {
    23             return event.fromElement;
    24         } else {
    25             return null;
    26         }
    27     },
    28     getButton: function(event) {
    29         if (document.implementation.hasFeature("MouseEvents", "2.0")) {
    30             return event.button;
    31         } else {
    32             switch (event.button) {
    33             case 0:
    34             case 1:
    35             case 3:
    36             case 5:
    37             case 7:
    38                 return 0;
    39             case 2:
    40             case 6:
    41                 return 2;
    42             case 4:
    43                 return 1;
    44             }
    45         }
    46     },
    47     getCharCode: function(event) {
    48         if (typeof event.charCode == "number") {
    49             return event.charCode;
    50         } else {
    51             return event.keyCode;
    52         }
    53     },
    54     getWheelDelta: function(event) {
    55         if (event.wheelDelta) {
    56             return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
    57         } else {
    58             return -event.detail * 40;
    59         }
    60     },
    61     getClipboardText: function(event) {
    62         var clipboardData = (event.clipboardData || window.clipboardData);
    63         return clipboardData.getData("text");
    64     },
    65     setClipboardText: function(event, value) {
    66         if (event.clipboardData) {
    67             return event.clipboardData.setData("text/plain", value);
    68         } else if (window.clipboardData) {
    69             return window.clipboardData.setData("text", value);
    70         }
    71     },
    72     preventDefault: function(event) {
    73         if (event.preventDefault) {
    74             event.preventDefault();
    75         } else {
    76             event.returnValue = false;
    77         }
    78     },
    79     removeHandler: function(element, type, handler) {
    80         if (element.removeEventListener) {
    81             element.removeEventListener(type, handler, false);
    82         } else if (element.detachEvent) {
    83             element.detachEvent("on" + type, handler);
    84         } else {
    85             element["on" + type] = null;
    86         }
    87     },
    88     stopPropagation: function(event) {
    89         if (event.stopPropagation) {
    90             event.stopPropagation();
    91         } else {
    92             event.cancelBubble = true;
    93         }
    94     }
    95 };
      1 //addHandler
      2 var btn = document.getElementById("myBtn");
      3 var handler = function() {
      4         console.log("handler");
      5     };
      6 EventUtil.addHandler(btn, "click", handler);
      7 //addHandler(load)
      8 EventUtil.addHandler(window, "load", function() {
      9     console.log("Loaded!");
     10 });
     11 //addHandler(loadImage)
     12 EventUtil.addHandler(window, "load", function() {
     13     var image = document.createElement("img");
     14     EventUtil.addHandler(image, "load", function(event) {
     15         event = EventUtil.getEvent(event);
     16         console.log(EventUtil.getTarget(event).src);
     17     });
     18     document.body.appendChild(image);
     19     image.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
     20 });
     21 //addHandler(script)
     22 EventUtil.addHandler(window, "load", function() {
     23     var script = document.createElement("script");
     24     EventUtil.addHandler(script, "load", function(event) {
     25         console.log("Loaded");
     26     });
     27     script.src = "example.js";
     28     document.body.appendChild(script);
     29 });
     30 //addHandler(link)
     31 EventUtil.addHandler(window, "load", function() {
     32     var link = document.createElement("link");
     33     link.type = "text/css";
     34     link.rel = "stylesheet";
     35     EventUtil.addHandler(link, "load", function(event) {
     36         console.log("css load");
     37     });
     38     link.href = "example.css";
     39     document.getElementsByTagName("head")[0].appendChild(link);
     40 });
     41 //addHandler(unload)
     42 EventUtil.addHandler(window, "unload", function(event) {
     43     console.log("Unloaded");
     44 });
     45 //addHandler(setAttribute)
     46 EventUtil.addHandler(window, "load", function(event) {
     47     var list = document.getElementById("myList");
     48     list.setAttribute("customname", "value");
     49 });
     50 //addHandler(nodeValue)
     51 EventUtil.addHandler(window, "load", function(event) {
     52     var div = document.getElementById("myDiv");
     53     div.firstChild.nodeValue = "Some new Text";
     54 });
     55 
     56 //getEvent
     57 btn.onclick = function(event) {
     58     event = EventUtil.getEvent(event);
     59 };
     60 
     61 //getTarget
     62 btn.onclick = function(event) {
     63     event = EventUtil.getEvent(event);
     64     var target = EventUtil.getTarget(event);
     65 };
     66 
     67 //getRelatedTarget
     68 var div = document.getElementById("myDiv");
     69 EventUtil.addHandler(div, "mouseout", function(event) {
     70     event = EventUtil.getEvent(event);
     71     var target = EventUtil.getTarget(event);
     72     var relatedTarget = EventUtil.getRelatedTarget(event);
     73     console.log("moused out of " + target.tagName + " to " + relatedTarget.tagName);
     74 });
     75 
     76 //getButton
     77 var div = document.getElementById("myDiv");
     78 EventUtil.addHandler(div, "mousedown", function(event) {
     79     event = EventUtil.getEvent(event);
     80     console.log(EventUtil.getButton(event));
     81 });
     82 
     83 //getCharCode
     84 var textbox = document.getElementById("myText");
     85 EventUtil.addHandler(textbox, "keypress", function(event) {
     86     event = EventUtil.getEvent(event);
     87     var keyCode = EventUtil.getCharCode(event);
     88     console.log(keyCode);
     89     var rekeyCode = String.fromCharCode(keyCode);
     90     console.log(rekeyCode);
     91 });
     92 
     93 //getClipboardText
     94 EventUtil.addHandler(textbox, "paste", function(event) {
     95     event = EventUtil.getEvent(event);
     96     var text = EventUtil.getClipboardText(event);
     97 
     98     if (!/^\d*$/.test(text)) {
     99         EventUtil.preventDefault(event);
    100     }
    101 });
    102 
    103 //preventDefault
    104 var link = document.getElementById("myLink");
    105 link.onclick = function(event) {
    106     event = EventUtil.getEvent(event);
    107     EventUtil.preventDefault(event);
    108 };
    109 
    110 //stopPropagation
    111 btn.onclick = function(event) {
    112     console.log("stopPropagation");
    113     event = EventUtil.getEvent(event);
    114     EventUtil.stopPropagation(event);
    115 };
    116 document.body.onclick = function(event) {
    117     console.log("Body clicked")
    118 };
    119 
    120 //removeHandler
    121 EventUtil.removeHandler(btn, "click", handler);
  • 相关阅读:
    5.19 省选模拟赛 T1 小B的棋盘 双指针 性质
    5.15 省选模拟赛 容斥 生成函数 dp
    5.15 省选模拟赛 T1 点分治 FFT
    5.15 牛客挑战赛40 B 小V的序列 关于随机均摊分析 二进制
    luogu P4929 【模板】舞蹈链 DLX
    CF 878E Numbers on the blackboard 并查集 离线 贪心
    5.10 省选模拟赛 拍卖 博弈 dp
    5.12 省选模拟赛 T2 贪心 dp 搜索 差分
    5.10 省选模拟赛 tree 树形dp 逆元
    luogu P6088 [JSOI2015]字符串树 可持久化trie 线段树合并 树链剖分 trie树
  • 原文地址:https://www.cnblogs.com/qzsonline/p/2521586.html
Copyright © 2011-2022 走看看