javascript事件处理模型实例说明


Posted in Javascript onMay 31, 2016

事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

一、添加事件监听

IE:

attachEvent("onclick",function(){...}) //添加

detachEvent("onclick",function(){...}) //删除

FF:

addEventListener("click",function(){...},false)

//可以跟一个对象添加多个事件监听,跟默认的对象事件不同

removeEventListenner("click",function(){...},false)

二、得到事件对象

IE:

op.onClick=function(){

    ver oevent = window.event; //作为window的一个属性

}

FF:

op.onClick=function(oevent){

    ....  //通过传入参数来控制

}

通用:

op.onClick=function(oevent){

    if(window.event){

        oevent=window.event;

    }

}

//即时得到了通用的,但是他们返回对象的属性和方法也不尽一致,但可以使用通过EventUtil来解决!

var EventUtil = new Object;
/**//*
  此方法用来给特定对象添加事件,oTarget是指定对象,sEventType是事件类型,如click、keydown等,   fnHandler是事件回调函数
*/
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
   //firefox情况下
   if (oTarget.addEventListener) {
     oTarget.addEventListener(sEventType, fnHandler, false);
   }
   //IE下
   else if (oTarget.attachEvent) {
     oTarget.attachEvent("on" + sEventType, fnHandler);
   }
   else {
     oTarget["on" + sEventType] = fnHandler;
   }
};
/*
  此方法用来移除特定对象的特定事件,oTarget是指定对象,sEventType是事件类型,如click、keydown等,fnHandler是事件回调函数
*/   
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
   if (oTarget.removeEventListener) {
     oTarget.removeEventListener(sEventType, fnHandler, false);
   } else if (oTarget.detachEvent) {
     oTarget.detachEvent("on" + sEventType, fnHandler);
   } else {
     oTarget["on" + sEventType] = null;
   }
};

/*
格式化事件,因为IE和其他浏览器下获取事件的方式不同并且事件的属性也不尽相同,通过此方法提供一个一致的事件
*/
EventUtil.formatEvent = function (oEvent) {
   //isIE和isWin引用到一个js文件,判断浏览器和操作系统类型
   if (isIE && isWin) {
     oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
     //IE只支持冒泡,不支持捕获
     oEvent.eventPhase = 2;
     oEvent.isChar = (oEvent.charCode > 0);
     oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
     oEvent.pageY = oEvent.clientY + document.body.scrollTop;
     //阻止事件的默认行为
     oEvent.preventDefault = function () {
       this.returnValue = false;
     };

      //将toElement,fromElement转化为标准的relatedTarget
     if (oEvent.type == "mouseout") {
       oEvent.relatedTarget = oEvent.toElement;
     } else if (oEvent.type == "mouseover") {
       oEvent.relatedTarget = oEvent.fromElement;
     }
     //取消冒泡   
     oEvent.stopPropagation = function () {
       this.cancelBubble = true;
     };

     oEvent.target = oEvent.srcElement;
     //添加事件发生时间属性,IE没有
     oEvent.time = (new Date).getTime();
   }
   return oEvent;
};

EventUtil.getEvent = function() {
   if (window.event) {
     //格式化IE的事件
     return this.formatEvent(window.event);
   } else {
     return EventUtil.getEvent.caller.arguments[0];
   }
};
/*
*附带上一个判断浏览器和系统类型的js文件,通过引入一些名字显而易见的全局变量作为判断的结果,使用时需要小心变量名称冲突:
*/
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);

function compareVersions(sVersion1, sVersion2) {

  var aVersion1 = sVersion1.split(".");
  var aVersion2 = sVersion2.split(".");
  
  if (aVersion1.length > aVersion2.length) {
    for (var i=0; i < aVersion1.length - aVersion2.length; i++) {
      aVersion2.push("0");
    }
  } else if (aVersion1.length < aVersion2.length) {
    for (var i=0; i < aVersion2.length - aVersion1.length; i++) {
      aVersion1.push("0");
    }  
  }
  
  for (var i=0; i < aVersion1.length; i++) {
 
    if (aVersion1[i] < aVersion2[i]) {
      return -1;
    } else if (aVersion1[i] > aVersion2[i]) {
      return 1;
    }  
  }
  
  return 0;

}

var isOpera = sUserAgent.indexOf("Opera") > -1;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;

if (isOpera) {
  var fOperaVersion;
  if(navigator.appName == "Opera") {
    fOperaVersion = fAppVersion;
  } else {
    var reOperaVersion = new RegExp("Opera (//d+//.//d+)");
    reOperaVersion.test(sUserAgent);
    fOperaVersion = parseFloat(RegExp["$1"]);
  }

  isMinOpera4 = fOperaVersion >= 4;
  isMinOpera5 = fOperaVersion >= 5;
  isMinOpera6 = fOperaVersion >= 6;
  isMinOpera7 = fOperaVersion >= 7;
  isMinOpera7_5 = fOperaVersion >= 7.5;
}

var isKHTML = sUserAgent.indexOf("KHTML") > -1 
       || sUserAgent.indexOf("Konqueror") > -1 
       || sUserAgent.indexOf("AppleWebKit") > -1; 
       
var isMinSafari1 = isMinSafari1_2 = false;
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;

if (isKHTML) {
  isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
  isKonq = sUserAgent.indexOf("Konqueror") > -1;

  if (isSafari) {
    var reAppleWebKit = new RegExp("AppleWebKit///(//d+(?://.//d*)?)");
    reAppleWebKit.test(sUserAgent);
    var fAppleWebKitVersion = parseFloat(RegExp["$1"]);

    isMinSafari1 = fAppleWebKitVersion >= 85;
    isMinSafari1_2 = fAppleWebKitVersion >= 124;
  } else if (isKonq) {

    var reKonq = new RegExp("Konqueror///(//d+(?://.//d+(?://.//d)?)?)");
    reKonq.test(sUserAgent);
    isMinKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0;
    isMinKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0;
    isMinKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0;
    isMinKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0;
  } 
  
}

var isIE = sUserAgent.indexOf("compatible") > -1 
      && sUserAgent.indexOf("MSIE") > -1
      && !isOpera;
      
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;

if (isIE) {
  var reIE = new RegExp("MSIE (//d+//.//d+);");
  reIE.test(sUserAgent);
  var fIEVersion = parseFloat(RegExp["$1"]);

  isMinIE4 = fIEVersion >= 4;
  isMinIE5 = fIEVersion >= 5;
  isMinIE5_5 = fIEVersion >= 5.5;
  isMinIE6 = fIEVersion >= 6.0;
}

var isMoz = sUserAgent.indexOf("Gecko") > -1
      && !isKHTML;

var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;

if (isMoz) {
  var reMoz = new RegExp("rv:(//d+//.//d+(?://.//d+)?)");
  reMoz.test(sUserAgent);
  isMinMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0;
  isMinMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0;
  isMinMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;
}

var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML 
      && (sUserAgent.indexOf("Mozilla") == 0) 
      && (navigator.appName == "Netscape") 
      && (fAppVersion >= 4.0 && fAppVersion < 5.0);

var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;

if (isNS4) {
  isMinNS4 = true;
  isMinNS4_5 = fAppVersion >= 4.5;
  isMinNS4_7 = fAppVersion >= 4.7;
  isMinNS4_8 = fAppVersion >= 4.8;
}

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") 
      || (navigator.platform == "Macintosh");

var isUnix = (navigator.platform == "X11") && !isWin && !isMac;

var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
var isMac68K = isMacPPC = false;
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;

if (isWin) {
  isWin95 = sUserAgent.indexOf("Win95") > -1 
       || sUserAgent.indexOf("Windows 95") > -1;
  isWin98 = sUserAgent.indexOf("Win98") > -1 
       || sUserAgent.indexOf("Windows 98") > -1;
  isWinME = sUserAgent.indexOf("Win 9x 4.90") > -1 
       || sUserAgent.indexOf("Windows ME") > -1;
  isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 
       || sUserAgent.indexOf("Windows 2000") > -1;
  isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 
       || sUserAgent.indexOf("Windows XP") > -1;
  isWinNT4 = sUserAgent.indexOf("WinNT") > -1 
       || sUserAgent.indexOf("Windows NT") > -1 
       || sUserAgent.indexOf("WinNT4.0") > -1 
       || sUserAgent.indexOf("Windows NT 4.0") > -1 
       && (!isWinME && !isWin2K && !isWinXP);
} 

if (isMac) {
  isMac68K = sUserAgent.indexOf("Mac_68000") > -1 
        || sUserAgent.indexOf("68K") > -1;
  isMacPPC = sUserAgent.indexOf("Mac_PowerPC") > -1 
        || sUserAgent.indexOf("PPC") > -1; 
}

if (isUnix) {
  isSunOS = sUserAgent.indexOf("SunOS") > -1;

  if (isSunOS) {
    var reSunOS = new RegExp("SunOS (//d+//.//d+(?://.//d+)?)");
    reSunOS.test(sUserAgent);
    isMinSunOS4 = compareVersions(RegExp["$1"], "4.0") >= 0;
    isMinSunOS5 = compareVersions(RegExp["$1"], "5.0") >= 0;
    isMinSunOS5_5 = compareVersions(RegExp["$1"], "5.5") >= 0;
  }
}

以上就是js事件处理,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
jQuery基础知识点总结(必看)
May 31 #Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 #Javascript
javascript小数精度丢失的完美解决方法
May 31 #Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 #Javascript
javascript基本语法
May 31 #Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 #Javascript
通用无限极下拉菜单的实现代码
May 31 #Javascript
You might like
安装APACHE
2007/01/15 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
竞选班长演讲稿
2013/12/30 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
python 实现的截屏工具
2021/05/08 Python