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 Event(事件模型)

  • 2013年04月23日 14:34
  • 526KB
  • 下载

javascript事件模型

闲来无事,总结一下一些前端基础,毕竟人年轻啊,温故而知新。本篇主题是--->js事件模型。 要了解事件模型,先说事件(event)。事件,是javascript的核心,也是其价值所在,当我们在浏览器 ...

JavaScript事件模型

原文在 http://www.cnblogs.com/1wen/p/5640997.html我增加上我的例子 并且进行了理解JavaScript事件模型 下面的代码是我写的,上面的部分知识总结不...

JavaScript事件驱动模型

1.事件驱动模型:注:可以看做用户点击某个功能或者按钮,来产生一个onclick事件来触发某个函数; 2.事件驱动要素: 1.事件源; 2.事件(行为); 例如: ...

轻松学习JavaScript二十七:DOM编程学习之事件模型

在介绍事件模型之前,我们先来看什么是事件和什么是event对象。        一事件介绍        JavaScript事件是由访问Web页面的用户引起的一系列操作,使我们有能力创建动态页面...

javascript--事件绑定&模型

3种事件绑定 1html方式 2对象属性方式 3 addeventlistener方式 2种模型:捕捉,冒泡 #test1,#test2,#t3,#t4{ widt...

javascript之事件模型

事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:D...

javascript事件模型框架

原文链接 最近一直在读《javascript高级程序设计》,也快读完了,读到事件这一章,书中提供的一个事件工具类很实用,我注释了一下,并摘记: //eventutil.js var Ev...

javascript事件模型解析

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

Javascript事件模型:捕获和冒泡

在Javascript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?event是用户操作网页时发生的交互动作,比如click/move, event除了用...
  • iefreer
  • iefreer
  • 2013年02月17日 18:28
  • 7683
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript--事件模型
举报原因:
原因补充:

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