JavaScript事件模型

一、事件流

  事件流意味着页面上不止一个元素可以相应相同的事件。逻辑上,每个元素必须能以指定顺序响应事件。事件顺序是IE4.0和Netscapte4.0中支持的事件之间的主要不同点。

1.事件冒泡

  对于IE,解决方案是使用事件冒泡技术。基本思想是,事件从事件发生的目标最内部开始出发,向上触发到最外部(document对象)。

  如果在IE5.5中点击div元素,事件以如下顺序冒泡:

    1)<div/>

    2).<body/>

    3)document

2.事件捕获

  事件捕获与冒泡正好相反,它的事件触发顺序是从最外层的对象(document对象)到最里层的对象。事件捕获也可以window级的事件,但是需要开发者显示指定。Netscape Navigator也不能处理页面上所有元素的事件。

  如果在Netscape4.x中点击div元素,事件按照如下路径触发:

    1)document

    2)div

3.DOM事件流

  DOM同时支持事件捕获和事件冒泡,但是事件捕获先发生。两个事件流可以遍历DOM中的所有的对象,起点和结束点为document对象。

  因为事件目标(div元素)是最里层的元素(DOM树的最深层),它实际上连续接受事件两次:一次在捕获阶段;一次在冒泡阶段。

  DOM事件模型的一个特色是,文本节点也可以触发事件(IE不行)。

二、事件处理程序/监听器

  事件是被用户或者浏览器执行的某种行为。这些事件被命名为click、load和mouseover等等。为响应一个事件而被调用的函数称为事件处理程序(DOM中叫做事件监听器)。响应click事件的函数称为onclick事件处理程序。事件处理程序的指派方法有两种方式:一种是传统事件处理程序指派方法,被所有浏览器支持;一种为现代事件处理指派方法,只现代浏览器支持。

1) 传统事件处理程序指派方法

  传统的事件处理程序指派方法采用两种方式之一将事件处理程序指派给事件:在JS中或者在HTML中。

  A. 在JS中指定事件处理程序

    例子:var v=document.getElementById(“div1”);

       V.onclick=funtion(){

       alert(“我被点了”)

       }

在使用已有函数的时候应该注意:

  1) 在绑定事件处理程序到事件属性时,只能引用函数的名称,后面不能加括号。

  2) 不管函数是如何定义的,必须确保在XHTML元素被添加到DOM之前,登记事件处理程序。

  B.  在HTML标记的事件处理属性中指定

  如果要在XHTML中指派事件处理程序,只需要在HTML标记中添加一个事件处理属性,并且将恰当的脚本代码作为属性值。

  例子:<div onclick=”alert(‘我被点击’)”></div>

  必须注意:在HTML中,无论采取哪种指派方式,事件处理程序的名称必须全部是小写字母。

  3) 现代事件处理程序指派方法

  1) IE浏览器

  在IE中,每个元素和window对象有两个方法:attachEvent()和detachEvent()。attachEvent()用于将一个处理程序绑定到一个事件,而detachEvent()用于解除事件处理程序的绑定。这两个方法都有两个参数:要指派的事件处理程序的名称(例如,onclick)、函数名称。其语法格式为:

  [object].attachEvent(“事件处理程序的名称”,”函数”);

  [object].detachEvent(“事件处理程序的名称”,”函数”);

2) DOM

  DOM中使用addEventListener()和removeEventListener()方法完成事件处理程序指派和删除的任务。这两种方法有三个参数,分别是事件的名称、要指派的函数、是否处理程序要用在冒泡或捕获阶段。如果处理程序要用在捕获阶段,第三个参数就设为true;如果要用在冒泡阶段,这个参数就设为false。其通用语法:

  [object]. addEventListener(“事件名称”,函数名,bCapture)

  [object]. removeEventListener (“事件名称”,函数名,bCapture)

3) 兼容性问题的解决

  为确保代码在IE和DOM浏览器下都能用,采用如下代码来解决:

  If(docement.addEventListener){

    v. addEventListener (“click”,fnClick1,true);

    v.addEventListener(“click”,fnClick2,true);

  }else if(

    document.attachEvent){

      v.attachEvent(“onclick”,fnClick1);

      v.attachEvent(“onclick”,fnClick2);

  }

三、事件处理程序的返回值

  为取消一个事件的默认行为,可以从它的时间处理程序中返回一个false值。当一个表单的submit处理程序返回false,表单的提交被取消。同样,返回false的在一个链接的click事件处理程序,将组织浏览器装载目标链接。

  Click--单选按钮和复选框取消设置。对于submit按钮,表单提交被取消。对于reset按钮,表单不被重置。对于链接,不装载链接目标。

  • dragdrop--取消拖曳。
  • keydown--在用户按住键不放时,取消随后的keypress事件。
  • keypress--取消keypress事件。
  • mosedown--取消默认行为(拖的开始、选择的开始、解除链接)。
  • mouseover--导致对window的status或defaultStatus属性的改变被浏览器忽略。Submit--取消表单提交。

四、Event对象

  浏览器的开发者创建了一个event对象,这个对象包含了事件发生时的特定信息,包括:

    1) 触发事件的对象

    2) 事件发生时的鼠标信息

    3)事件发生时的键盘信息

Event对象只在事件发生时创建,并且可以被事件处理程序访问。在所有事件处理程序执行完成后,event对象就被销毁。

  1) 定位

  在IE浏览器中,event对象是window对象的一个属性。

    例子:v.onclick=function(){

         Var v1=window.event

       }

  DOM标准中规定:event对象只能作为仅有的参数传给事件处理程序。

    例子:v.onclick=function(){

       Var v1=arguments[0];

       }

判断浏览器类型的方法:

    If(window.event){     //判断是不是IE浏览器

      Document.getElementById(“p1”).innerHTML=”IE”;

    }

    Else if(oEvent){ //判断是不是DOM浏览器

      Document.getElementById(“p1”).innerHTML=”DOM”;

    }

2) 属性和方法

  IE浏览器的event对象的属性和方法

 Button,cancelBubble,clientX,clietY,ctrlkey,fromElement,keyCode,offsetX,offset,repeat,returnValue,screenX,screen,shiftKey,srcElement,toElement,type,x,y.

DOM的event对象的属性和方法

AltKey,bubbles,button,cancelable,cancelBubble,charCode,clientX,clicentY,ctrlKey,currentTarget,detail,eventPhase,isChar,keyCode,metaKey,pageX,pageY,preventDefault(),relatedTarget,screenX,screenY,shiftKey,stopPropagation(),target,timestamp,type.

3) 相同点

  1) 获取事件类型

    在两种类型的浏览器中都可以使用同样的代码:

    Var sType=oEvent.type;

  2) 获取键盘代码(leydown/keyup事件)

    在keydown或者keyup事件期间,可以使用keyCode属性获取按键代码

    Var iKeyCode=oEvent.keyCode;

  3) 检测shift,alt,ctrl

    为检测shift、alt或者ctrl键是否被按下,都采用同样的方法:

      Var shift=oEvent.shiftKey;

      Var alt=oEvent.altKey;

      Vat ctrl=oEvent.ctrlKey;

  4) 获取客户区坐标

    在鼠标事件期间,通过clientX和clientY属性,可以获取鼠标指针相对于客户

  5) 获取屏幕坐标

    在鼠标事件期间,通过screenX和screenY属性,可以获取鼠标指针相对于计算机屏幕的位置:

      Var iScreenX=oEvent.screenX;

      Var iScreenY=Event.screenY;

  4) 不同点

    1) 获取目标

      在IE中,目标包含在event对象的srcElement属性中:

      Var oTargrt=oEvent.srcElement;

      在DOM浏览器中,目标包含在target属性中:

      Var oTargrt=oEvent.target;

    2) 获取字符码

      IE的keyCode属性返回字符码。

      例子:var iCharCode=oEvent.keyCode;

      在DOM浏览器中,按键代码和字符代码是分离的。为得到字符代码,必须使用charCode属性:

        Var iCharCode=oEvent.charCode;

        Var schar=string.fromcharcode(oEvent.charcode);

    3) 阻止时间的默认行为

      在IE中,为阻止默认的事件行为,必须将returnValue属性设置为false:

        oEvent.returnValue=fals;

      在DOM浏览器中,则是调用preventDefault()方法:

        oEvent.preventDefault();

    4) 中止事件传播(冒泡)

      在IE中,必须将cancelBubble属性设为true:

        oEvent.cancelBubble=true;

      在DOM中,只需调用stopPropagation()方法:

        oEvent.stopPropagation();

五、事件类型

  根据触发事件的对象以及事件触发的行为,浏览器中发生的事件可以分组成为几个特定的类型。DOM规范中定义了几个事件组:

  鼠标事件--用户使用鼠标执行某个任务时触发鼠标事件。

  键盘事件--用户在键盘上打字时触发键盘事件。

  HTML事件--当浏览器窗口或特定的客户机服务器交互发生改变时处罚HTML事件。

  1.鼠标事件

    Click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove.

    1)事件属性:

  • 对于每个鼠标事件,属性被填入event对象:
  • 坐标属性
  • Type属性
  • Taget或srcElement属性
  • shiftKey,ctrKey,altKey,metaKey属性
  • button属性

  事件发生次序

  在同一目标上,click事件触发前,mousedown和mouseup事件依次发生。

  1.mousedown2.mouseup3.click4.mousedown5.mouseup6.click7.dbclick

  2.键盘事件

  键盘事件在用户使用键盘时发生,包括:

  • Keydown:当用户在键盘上按下一个键时发生。如果按住不放它就重复发生。
  • Keypress:当用户在键盘上按下一个字符键(不包括shift和ctrl)时发生。如果按住不放它就重复发生。
  • Keyup:当用户释放一个按下的键时发生。

  事件属性:

  • KeyCode属性
  • CharCode属性(DOM)
  • Target(DOM)或srcElement(IE)属性
  • ShiftKey,ctrKey,altKey和metaKey(DOM)属性

  事件发生次序:

  当用户按下一个字符键一次时,事件发生的次序:

  1. keydown
  2. keypress
  3. keyup

  当用户按下一个非字符键一次时,事件发生的次序:

  1. keydown
  2. keyup

3.HTML事件

  • Load事件——在窗口中,当页面全部装载时;
  • Unload事件——在窗口中,当页面被全部卸载时;
  • Abort事件——在object元素中,当用户中止装载进程之前,如果还没有被完全装载;
  • Error事件——在窗口中,当一个JS错误发生时;
  • Select事件——在一个文本框中,当用户选择一到多个字符时,触发;
  • Change事件——在一个文本框中,当它失去焦点,并且其值被改变;
  • Submit事件——当表单的提交按钮被点击时;
  • Reset事件——当表单的重置按钮被点击时;
  • Resize事件——当窗口或框架尺寸调整时;
  • Scroll事件——当有用户滚动有滚动条的任何元素时;
  • Focus事件——当任何元素或者窗口获得焦点时;
  • Blur事件——当任何元素或者窗口失去焦点时;
时间: 2024-09-30 14:22:22

JavaScript事件模型的相关文章

JavaScript事件模型及事件代理

事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模型. 1.原始事件模型(DOM0级) 这是一种被所有浏览器都支持的事件模型,对于原始事件而言,没有事件流,事件一旦发生将马上进行处理,有两种方式可以实现原始事件: (1)在html代码中直接指定属性值:<button id="demo" type="button"

【repost】JavaScript 事件模型 事件处理机制

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. 今天的事件 在漫长的演变史,我们已经告

Javascript事件模型系列(一)事件及事件的三种模型

转载: http://www.cnblogs.com/lvdabao/p/3265870.html 一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加百度的实习生面试,被问到事件模型,当时被问的一头雾水,平时敲onclick敲的挺爽,却没有关注到事件模型的整体概念.这个周末难得清闲,决定就javascript中的事件模型写个系列,算是对知识点的一个

JavaScript——事件模型

DOM事件流: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流. 事件顺序有两种类型:事件捕捉和事件冒泡. 冒泡型事件(Event Bubbling) 这是IE浏览器对事件模型的实现,也是最容易理解的,至少笔者觉得比较符合实际的.冒泡,顾名思义,事件像个水中的气泡一样一直往上冒,直到顶端.从DOM树型结构上理解,就是事件由叶子节点沿祖先结点一直向上传递直到根

[JS学习笔记]浅谈Javascript事件模型

DOM0级事件模型 element.on[type] = function(){} 兼容性:全部支持 lay1 lay2 lay3 e.target:直接触发事件的元素[IE8及以下不支持taget属性,使用e.srcElement代替] e.srcElement:直接触发事件的元素[FF不支持srcElement属性,使用e.target代替] e.currentTarget:被间接触发的元素[IE8及以下不支持currentTarget属性,使用this代替] this:同e.current

JavaScript事件机制

<script type="text/javascript" src="http://runjs.cn/gist/2zmltkfa/all"></script> [前端培养-作业01]javascript事件机制 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代

关于事件模型的一些看法

http://forkme.info/about-event-loop/ 概述 事件处理模型, 也即是全异步事件处理模型.在以前, 对于那些同时执行多项任务, 但仍能响应用户交互的应用程序通常需要实施一种使用多进程(如linux的fork操作)或者多线程的操作.对于低并发的环境, 这样做无疑能避免进程因等待某个操作而出现"假死"现象.但对于更复杂的异步应用程序或者是要求高并发的环境, 就要使用事件模型来处理异步事件, 这样做有很多好处: 在高并发条件下响应用户时间更快; 内存消耗降低,

6月第4周--javascript 事件机制

本周任务,对javascript事件机制进行思考 提供以下 几个博文 论点: 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代理的实现,并封装一个方法 6.事件代理的问题<li><span></span></li>如果同时给span与li绑定事件该如何组装冒泡??? 7.tap

定时器运行原理 &amp;&amp; javascript事件循环模型

定时器是我们经常使用的一个异步函数,它的用处十分广泛,比如图片轮播.各种小的动画.延时操作等等:定时器函数只有两个setTimeout.setInterval,这两个工作原理相同,唯一的区别是:setTimeout只执行一次,setInterval循环执行:通过以下实例看看对定时器原理掌握程度: 定时器3个实例 首先声明这三个实例输出皆不同,先思考输出结果,以及为何不同 实例一: console.log('test1') for(var i=0;i<10;i++){ setTimeout(()=