首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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事件处理模型实例说明

- Author -

xcp

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
浅谈js的异步执行
Oct 18 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
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
sock(2) sentinel(1) XPathParser(1) Windows server 2003(1) ACID(1) minio(1) protocol(1) mysqldump(1) csgo(1) Stater(1)
You might like
linux下为php添加curl扩展的方法
2011/07/29 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
js实现贪吃蛇小游戏（加墙）
2020/07/31 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python的另外几种语言实现
2015/01/29 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
pandas.cut具体使用总结
2019/06/24 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
什么叫做SQL注入，如何防止
2016/10/04 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL