zoukankan      html  css  js  c++  java
  • 关于跨浏览器的部分代码的封装

    这段代码是从javascript高级程序设计(第三版)上面事件部分抽取出来的,共享一下,级当时自己做个笔记.以后应该能够用得找.

     1  var EventUtil = {
     2             addHandler: function (element, type, handler) {//注册事件
     3                 if (element.addEventListener) {//非IE
     4                     element.addEventListener(type, handler, false);
     5                 }
     6                 else if (element.attachEvent) {//IE
     7                     element.attachEvent("on" + type, handler);
     8                 }
     9                 else {//dom0级
    10                     element["on" + type] = handler;
    11                 }
    12             },
    13             removeHandler: function (element, type, handler) {//取消注册事件
    14                 if (element.removeEventListener) {//非IE
    15                     element.removeEventListener(type, handler, false);
    16                 }
    17                 else if (element.detachEvent) {//IE
    18                     element.detachEvent("on" + type, handler);
    19                 }
    20                 else {//dom0级
    21                     element["on" + type] = null;
    22                 }
    23             },
    24             getEvent: function (event) {//返回event的引用
    25                 return event ? event : window.event;
    26             },
    27             getTarget: function (event) {//返回鼠标单击的目标对象
    28                 return event.target || event.srcElement;
    29             },
    30             preventDefault: function (event) {//取消默认事件(a的href,radio,checkbox,)
    31                 if (event.preventDefault) {
    32                     event.preventDefault();
    33                 }
    34                 else {
    35                     event.returnValue = false;
    36                 }
    37             },
    38             stopPropagation: function (event) {//因为这个EventUtil只支持冒泡,不支持事件捕获,所以这个方法只能阻止冒泡
    39                 if (event.stopPrapagation) {
    40                     event.stopPropagation();
    41                 }
    42                 else {
    43                     event.cancelBubble = true;
    44                 }
    45             },
    46             getRelatedTarget: function (event) {//获取相关元素
    47                 /*
    48                 页面中有一个div;当鼠标离开这个div时,事件的主目标是div,而相关元素是body.
    49                 mouseover:事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素.
    50                 mouseout:事件的主目标是失去光标的元素,而相关元素使获得光标的那个元素.
    51                 */
    52                 if (event.relatedTarget) { return event.relatedTarget; }
    53                 else if (event.toElement) { return event.toElement; }
    54                 else if (event.fromElement) { return event.fromElement; }
    55                 else { return null; }
    56             },
    57             getButton: function (event) {//获取鼠标按钮的点击方式
    58                 if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; }
    59                 else {
    60                     switch (event.button) {
    61                         case 0:
    62                         case 1:
    63                         case 3:
    64                         case 5:
    65                         case 7:
    66                             return 0;//左击
    67                         case 2:
    68                         case 6:
    69                             return 2;//中间键
    70                         case 4:
    71                             return 1;//右击
    72                     }
    73                 }
    74             }
    75         };
  • 相关阅读:
    matplotlib数据可视化之柱形图
    xpath排坑记
    Leetcode 100. 相同的树
    Leetcode 173. 二叉搜索树迭代器
    Leetcode 199. 二叉树的右视图
    Leetcode 102. 二叉树的层次遍历
    Leetcode 96. 不同的二叉搜索树
    Leetcode 700. 二叉搜索树中的搜索
    Leetcode 2. Add Two Numbers
    Leetcode 235. Lowest Common Ancestor of a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/3578867.html
Copyright © 2011-2022 走看看