JavaScript--事件模型

转载 2016年08月31日 09:51:52

JavaScript--事件模型

在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持.

1.原始事件模型

其事件类型:分为"输入事件(如onclicki)"和"语义事件(如onsubmit)"

事件程序的注册可以以下几种方式:
         1、JS代码作为HTML性质值

<input type="button" value="Press me" onclick="alert('thanks');"

2、事件处理程序作为JS属性

  附注:文档中的每个HTML元素在文档树中都有一个相应的JS对象,这个JS对象的属性对应于那个HTML元素的性质,无论作为HTML性质的JS代码还是作为JS属性的时间处理程序,其本身的属性都是函数"function".

<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>

第一种赋值方式:

document.f1.b1.onclick=function(){alert('thanks');};

第二种赋值方式:

function plead(){window.status="Please Press Me!";}
document.f1.bi.onmouseover=plead;

作为JS属性的事件处理程序可以用JS属性显式调用

document.myfrom.onsubmit();

事件处理程序可以返回fale来阻止浏览器执行事件的默认动作,常用的如对onsubmit的操作。例外是
对超链接mouseover的window.status显示事件的阻挡,是返回true.例如:

<a href="help.htm" onmouseover="window.status='help';return true;">help</a>

2.DOM2事件模型

这个模型参考了IE的气泡模型而制定的,它是由w3c制定的规范.在原始模型中事件一旦发生就直接调用事件句柄,没有其它的事件传播过程.而在DOM2模型中事件有一个特殊的传播过程,分为三个阶段:
(1)capturing phase:事件被从document一直向下传播到目标元素,在这过程中如果有哪个祖先元素对该事件感兴趣可以注册自己的处理函数.
(2)target phase:事件到达目标元素,执行目标元素的事件处理函数.
(3)bubbling phase:事件从目标元素上升一直到达document,虽然所有的事件类型都会经历captruing phase阶段但是只有部分事件会经历bubbling phase阶段,例如submit事件就不会被上浮.
在整个的事件传播过程中可以调用event.stopPropagation()来停止事件的传播,调用preventDefault()来阻止浏览器的默认行为.

addEventListener("eventType","handler","true!false");

removeEventListner("eventType","handler","true!false");

3.IE模型

IE模型也提供了一个event对象封装了事件的详细信息,但是IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性,IE中的事件传播模式对应于DOM2的第二和第三阶段,首先执目标元素的处理函数,然后向上传播到达document,ie中只能能捕捉鼠标事件,而DOM2中可以捕捉所有的事件,IE中注册和删除事件处理函数的方法也不同于DOM2.

事件处理函数的注册和删除是通过元素的attachEvent( "eventType","handler") and detachEvent("eventType","handler" ),与dom2不同的是eventType有on前缀

JavaScript--事件模型

在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了...
  • judyge
  • judyge
  • 2016年07月13日 14:53
  • 222

重拾javascript--事件模型

《重拾javascript–事件模型》1.概念 什么是事件? function save(){ //dothings }上面的onclick就是一种简单的事件(...
  • thelastwow
  • thelastwow
  • 2018年01月19日 09:33
  • 13

JavaScript 事件模型 事件处理机制

这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需。 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的...
  • chenmoquan
  • chenmoquan
  • 2013年08月21日 21:10
  • 13101

标准事件模型和IE事件模型

前言:在上一篇博客中总结了0级DOM事件模型和2级DOM事件模型,打铁趁热就在谈谈标准事件模型和IE事件模型的区别吧。一. 标准事件模型 在JavaScript中把标准事件模型的执行分为三个阶段,...
  • Picking_up_stones
  • Picking_up_stones
  • 2017年03月13日 20:11
  • 409

Java笔记006_委托事件模型

什么是委托事件模型 在教材上的图中,我们可以发现,用户通过键盘、鼠标等进行操纵的行为,最终都传递给了JVM,那么JVM在接收到这些事件以后该如何处理呢?我们把这种处理事件的方案,称之为事件模型。 J...
  • hbgCSDN
  • hbgCSDN
  • 2014年11月24日 08:32
  • 1315

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端面试经历,其中提到了面试官会考察手写一个简单的DOM事件模型。 “如果上述都ok的话,那么极有可能要求让你【实现事件...
  • GAMEloft9
  • GAMEloft9
  • 2016年04月29日 11:35
  • 7004

java中的事件模型原理

得首先明白java中的事件机制的参与者,有3种角色:  1.event object:事件对象,就是事件产生时具体的“事件”,用于listener的相应的方法之中,作为参数,一般存在与listern...
  • perfect2011
  • perfect2011
  • 2011年12月14日 16:43
  • 815

Swing 事件模型

在Swing的事件模型中,组件可以发起(触发)一个事件。每种事件的类型由单独的类表 示。当事件被触发时,它将被一个或多个“监听器”接收,监听器负责处理事件。所以, 事件发生的地方可以与事件处理的地...
  • u011607148
  • u011607148
  • 2013年08月30日 10:44
  • 619

AWT事件模型总结

一、常用术语 GUI(Graphics user interface)图形用户接口 CLI (Command line user interface)命令行用户接口 Java为GUI提供的类。 jav...
  • renpingqing
  • renpingqing
  • 2013年07月27日 15:33
  • 2581

W3C DOM 事件模型(简述)

1、事件模型 因为事件捕获与冒泡模型都有其优点和解释,DOM标准支持捕获型与冒泡型,可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器,并且在处理函数内部,this关键字仍然指向被绑...
  • u012602393
  • u012602393
  • 2014年04月18日 21:33
  • 1528
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript--事件模型
举报原因:
原因补充:

(最多只允许输入30个字)