一：跨平台事件

什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。

什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。

下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：

DOM属性和方法 IE属性和方法
charcode keycode
preventDefault returnValue=false
relatedTarget fromobj|toobj
stopPropation cancelBuble=true
target srcobj
   

我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题：

  1. <html>
  2. <head>
  3.     <title>eventUtil</title>
  4.     <script eventType="text/javascript">
  5.         var eventUtil = {
               //监听事件
  6.             addListener: function(obj, eventType, fn) {
  7.                 if (obj.addEventListener) {
  8.                     obj.addEventListener(eventType, fn, false);
  9.                 } else if (obj.attachEvent) {
  10.                     obj.attachEvent('on' + eventType, fn);
  11.                 } else {
  12.                     obj['on' + eventType] = fn;
  13.                 }
  14.             },
  15.             //返回event对象
  16.             getEvent: function(event) {
  17.                 return event || window.event;
  18.                 //return event ? event : window.event;
  19.             },
  20.             //返回目标事件对象
  21.             getTarget: function(event) {
  22.                 return event.target || event.srcobj;
  23.             }，
  24.             preventDefault: function(event) {
  25.                 if (event.preventDefault) {
  26.                     event.preventDefault();
  27.                 } else {
  28.                     event.returnValue = false;
  29.                 }
  30.             },
  31.             removeListener: function(obj, eventType, fn) {
  32.                 if (obj.removeEventListener) {
  33.                     obj.removeEventListener(eventType, fn, false);
  34.                 } else if (obj.deattachEvent) {
  35.                     obj.detachEvent(eventType, fn);
  36.                 } else {
  37.                     obj['on' + eventType] = null;
  38.                 }
  39.             },
  40.  
  41.             stopPropagation: function(event) {
  42.                 if (event.stopPropagation) {
  43.                     event.stopPropagation();
  44.                 } else {
  45.                     event.cancelBubble = true;
  46.                 }
  47.             }
  48.         };
  49.     </script>
  50. </head>
  51. <body>
  52.     <input eventType="button" value="click me" id="btn" />
  53.     <p>event</p>
  54.     <a>Hello word!</a>
  55.     <script eventType="text/javascript">
  56.     function  addBtnListen(event)
  57.     {
  58.         var event = eventUtil.getEvent(event);
  59.         var target = eventUtil.getTarget(event);
  60.         alert("my name is kock");
  61.         alert(event.eventType);
  62.         alert(target);
  63.         eventUtil.stopPropagation(event);
  64.  
  65.     }
  66.     function getBodyListen(event)
  67.     {
  68.            alert("click body");
  69.     }
  70.     function  getLinkListen(event)
  71.     {
  72.              alert("prevent default event");
  73.              var event = eventUtil.getEvent(event);
  74.              eventUtil.preventDefault(event);
  75.     }
  76.     window.onload=function()
  77.     {
  78.             var btn = document.getobjById("btn");
  79.             var link = document.getobjsByTagName("a")[0];
  80.             eventUtil.addListener(btn, "click", addBtnListen);
  81.             eventUtil.addListener(document.body, "click", getBodyListen);
  82.             eventUtil.addListener(link, "click",getLinkListen);
  83.     }
  84. </script>
  85. </body>
  86. </html>

上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。

首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。

  1. eventUtil.formatEvent=function(event)
    {
       if(isIE&&isWin)---检测浏览器的问题，如有不清楚，见我上篇文章：http://www.cnblogs.com/jtjds/p/5461152.html   {
          event.charCode=(event.type=="keypress")?event.keycode:0;
          event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段
       }
       return event;
    }

 二：关于冒泡中的target和currentTarget

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。

  1. <div id="outer" style="background:#099">
  2.            <p>我是目标div</p>   ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
  1.            <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
  2.  
  3.            <br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
  4.  
  5. </div>
  6.  
  7. //看下第二个变列：
  1. <div id="outer" style="background:#099">
  2.            <div>我是目标div</div>   ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
  1.  
  1.            <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
  2.  
  3.            <br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
  4.  
  5. </div>
  1. function  getObj(id)
  2. {
  3.    return document.getElementById(id);
  4. }
  5. function addEvent(obj, event, fn)
  6. {
  7.    if(window.attachEvent)
  8.    {
  9.       obj.attachEvent("on" + event, fn);
  10.    }
  11.    else if(window.addEventListener)
  12.    {
  13.       obj.addEventListener(event, fn, false);
  14.    }
  15. }
  16. function test(e)
  17. {
  18.     alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
  19.  }
  20.      var outer = getObj("outer");
  21.      var inner = getObj("inner");
  22.      //addEvent(inner, "click", test);
  23.      addEvent(outer, "click", test);

 三：IE和DOM区别

  DOM IE
获取目标 event.target event.srcElement
获取字符代码 event.charCode event.keyCode
阻止默认行为 event.prevetDefault() event.returnvalue=false
冒泡 event.stopPropagation() event.cancelBubble=true

关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：

  1. document.body.oncontextmenu=function(event)
    {
        if(isIE)
        {
             var oEvent=window.event;
             oEvent.returnValue=false;  //也可以直接是return false；阻止默认行为
        }
       else
       {
            oEvent.preventDefault();
       }
    }

四：鼠标事件

  1. <p>use your mouse to click and double click the red square</p>
  2. <div style="width:100px;height:100px;background:red"
  3.         onmouseover="handleEvent(event)"
  4.         onmouseout="handleEvent(event)"
  5.         onmousedown="handleEvent(event)"
  6.         onmouseup="handleEvent(event)"
  7.         onclick="handleEvent(event)"
  8.         ondblclick="handleEvent(event)" id="div1"
  9.      >
  10. </div>
  11. <p><textarea id="txt1" rows="5" cols="45"></textarea></p>
  12. <!--检测键盘事件-->
  13. <p><input type="text" id="textbox"
  14.            onkeydown="handle(event)"
  15.            onkeypress="handle(event)"
  16.            onkeyup="handle(event)"
  17.           ></p>
  18. <p><textarea id="txt2" rows="10" cols="45"></textarea></p>

js文件如下：

  1. function handleEvent(event)
  2. {
  3.     var oText=document.getElementById('txt1');
  4.     oText.value+= "\n"+event.type;
  5.     oText.value+= "\n target is "+(event.srcElement||event.target).id;
  6.     oText.value+="\n at ("+event.clientX+","+event.clientY+")in the client";
  7.     oText.value+="\n at ("+event.screenX+","+event.screenY+")in the client";
  8.     oText.value+="\n button down is"+event.button;
  9.     var arrKeys=[];
  10.     oText.value+="\n relatedTarget is"+event.relatedTarget.tagName;
  11.     //event.relatedTarget.tagName可以判断鼠标的来源和出处
  12. }
  13. function handle(event)
  14. {
  15.    var oText2=document.getElementById('txt2');
  16.    oText2.value+="\n"+event.type;
  17.    var arrKeys=[];
  18.   if(event.shiftKey){arrKeys.push("Shift");}
  19.   if(event.ctrlKey){arrKeys.push("Ctrl");}
  20.   if(event.altKey){arrKeys.push("Alt");}
  21.    oText2.value+="\n keydown is  "+arrKeys;
  22. }

 作者：向婷风

 出处：http://www.cnblogs.com/jtjds/p/5492375.html

 如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者

本人同意 转载文章之后必须在 文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。

 

js中容易被忽视的事件问题总结的更多相关文章

  1. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  2. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  3. js中一次性注册多个事件

    在js中,如果想一次性给一个控件或者标签初测多个事件的方法: 假如有个<input>标签: <input id=”inputValue” value=”www.baidu.com”/ ...

  4. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  5. Js中的onblur和onfocus事件

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...

  6. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  7. JS中如何巧妙的用事件委托

    常见场景:页面有多个相同的按钮需要绑定同样的事件逻辑. 如下HTML,实现:点击每个按钮,当它的 data-id不为null的时候输出它的data-id(实际业务中会有更复杂的逻辑) <ul i ...

  8. js中for循环点击事件（闭包）

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  9. js中当for循环中有事件要使用循环变量时，变量用var声明和let声明的区别

    var 声明一个全局变量,声明的变量会变量提升: let 声明一个局部变量: 当页面加载完后,for循环也结束了,如果用var声明的变量此时也随着for循环的结束而自增到满足结束循环的条件, 此时调用 ...

随机推荐

  1. Visual Studio 2013 Preview 新功能

    先来看一下Visual Studio的版本历史: 1. Visual Studio.NET 2002 2. Visual Studio.NET 2003 3. Visual Studio.NET 20 ...

  2. react与redux学习资料的整理

    **重点内容**React学习 1.新手入门可以访问react的官方网站,如果英语不是特别好的同学可以访问中文版的,具体链接http://reactjs.cn/react/index.html 首页有 ...

  3. 更换SAP主界面右边区域背景主题

    1)  Tcode:SMW0(注意,最后面是零,不是英文字母O),选择第二个单选按钮 2)点击回车后,直接点击运行按钮. 3)在SAP WEB 资源库:对象显示 页面,点击:新建 4)创建对象名称,名 ...

  4. SharePoint 2010 文档管理系列之准备篇

    前言:很早自己就想写一个系列的文章,但是不知道写什么,最近在QQ群里,好多人说在做文档管理,其实文档管理也是SharePoint的一个很不错的功能点,自己想了想,也想多学习点东西,所以写这个主题吧,今 ...

  5. 桥牌笔记索引，牌例全部摘自Bridge Master 2000

    Level 3 A A34-到处都是希望 B B14 防将牌失控 B26 探索式打法 C C1 绝不能让东家上手 C5 4-1分布该怎么办? C10 保持将牌控制 C27 多一个成功机会 D D1 注 ...

  6. 基础学习day04---数组的操作

    一.数组基本常见操作 1.1.静态初始化 //第一种声明 //第一种声明 int [] arr=new int[5]; //第二种声明 int [] arr1=new int[]{5,3,8,1,9, ...

  7. iOS 学习 - 8 TableViewCell 自适应高度

    思路:计算文字的高度,存进数组 加注:存在中文,需要加一行文字的高度,也就是 font 主要代码 #pragma mark -- UITableViewDelegate - (CGFloat)tabl ...

  8. CoreAnimation-04-核心动画必备基础

    概述 简介 核心动画提供了一组非常强大的动画API,通过该组API可以高效的实现绝大部分绚丽的动画效果 注意事项 核心动画的操作在子线程中执行,不会阻塞主线程 核心动画直接作用与CALayer对象上, ...

  9. Mac上的软件的一些对开发者有用的使用技巧（持续更新）

    内容大纲: Google浏览器设置开发者模式 正文: 1.Google浏览器设置开发者模式

  10. java网络---再论URL & URI

    关于URL 和URI的关系,在本系列的第二篇:java网络---基本web概念 中已经简述了. 这里重复一点,就是URI包含URL,或者说URI是父类,URL就是子类的概念. 本篇再来详述这2个概念. ...