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前缀

IE与非IE浏览器在事件绑定的执行顺序问题

JavaScript代理

JavaScript基础讲解[七]_事件模型

JS事件模型小结

 

参考资料： JavaScript 博客园   

               JavaScript 百度贴吧

解决 IE7 下 window.status 不显示的问题

<a href="#" onmouseover="window.status='立即刷新对话区内容，默认为每12秒刷新一次。';return true;" onmouseout="window.status='';return true;" target='f1'>help</a>

具体的方法：打开IE7，在“工具—〉Internet 选项—〉安全—〉选中Internet”，点击“自定义级别”，在“允许状态栏通过脚本更新”中选择“启用”就行了。

IE6下不用设置，默认是可以的。

而FF下window.status 默认情况下是不能修改的