在各种浏览器中存在三种事件模型: 原始事件模型 (original event model),DOM2 事件模型, IE 事件模型. 其中原始的事件模型被所有浏览器所支持, 而 DOM2 中所定义的事件模型目前被除了 IE 以外的所有主流浏览器支持。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一、原始事件模型
其事件类型: 分为 "输入事件 (如 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>
二、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");
三、IE 模型
IE 模型也提供了一个 event 对象封装了事件的详细信息, 但是 IE 不把该对象传入事件处理函数, 由于在任意时刻只会存在一个事件, 所以 IE 把它作为全局对象 window 的一个属性, IE 中的事件传播模式对应于 DOM2 的第二和第三阶段, 首先执目标元素的处理函数, 然后向上传播到达 document,ie 中只能能捕捉鼠标事件, 而 DOM2 中可以捕捉所有的事件, IE 中注册和删除事件处理函数的方法也不同于 DOM2.
事件处理函数的注册和删除是通过元素的 attachEvent("eventType","handler") and detachEvent("eventType","handler"), 与 dom2 不同的是 eventType 有 on 前缀
特点:
1、传播过程只起泡,不捕捉。起泡中断方法:
window.ecent.cancelBubble=true;
2、Event 对象不是事件处理程序的函数参数,而是 window 的全局变量。
3、事件注册函数: attachEvent() 和反注册:detachEvent().
四、Netscape4 事件模型
由于 Netscape 好像已经完全停止开发,所以就不详述了,简单的说:就是只捕捉不起泡。
来源: http://www.phperz.com/article/17/0228/265291.html