JS事件模型小结

08年年初的一篇blog,转到这个博客上,想想当年跨浏览器真是一座山:

前几天看dojo的文档,其中多次提到DOM2事件模型,以前学习这部分的内容,主要愤慨于IE的不兼容性了,现在对于DOM2事件模型的概念又有些模糊,所以翻出了js权威指南(V4)又复习了一下,简单作一小结。
       JS权威指南中将JS事件模型分为四种
            1、原始事件模型:属性事件处理模式
            2、标准事件模型:DOM2对其作了标准化
            3、IE事件模型(IE5.5/IE6)
            4、 Netscape事件模型
 原始事件模型
         也就是基本事件处理,其实我们大多数人使用的JS事件处理模式都是这种代码方式。
         其事件类型:分为"输入事件(如onclicki)"和"语义事件(如onsubmit)"
        事件程序的注册可以以下几种方式:
         1、JS代码作为HTML性质值

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

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

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

JS函数运行在词法作用域中,也就是定义他们的作用域中,因此作为HTML性质的JS事件处理程序,作用域链比较特殊,其头是调用对象(既这段JS代码),下一个对象是触发事件的对象既event.currentTarget,其后就是其包容层元素。整个作用域链的精确构成依赖于具体实现。
        
DOM2事件模型
         DOM2的模型提高的复杂度:
         1、首先它的事件模型中引入了传播过程:1)先由document向目标对象传播称之为:捕捉阶段;2)目标对象的事件处理程序运行,3)从目标对象向document起泡。Event.stopPropagation()可以停止传播,preventDefault可以阻止事件的默认动作(想想以前的return false)。
        2、事件处理程序注册:EventTarget.addEventListensr(String type,EcentListener listener,blooean useCapure).其中第三个参数决定注册程序在传播的那个过程被调用,true:在捕捉阶段调用,false:在后两个阶段被调用。
        3、DOM2还支持JAVA式的对象式事件处理程序注册,用的少,略。
        4、事件模块和事件类型:根据事件语义和特性做分类
        5、合成事件,即由JS代码模拟事件发生(适用于Test代码):它分为以下三个步骤:
              1)创建合适的事件对象:

var e=document.createEvent("HTMLEvents");

2)初始化事件对象域(即:属性)

e.initEcent("click","true","true");

3)分派事件对象:

eventTarget.dispatchEvent();  

IE事件模型
         特点:
           1、传播过程只起泡,不捕捉。起泡中断方法:
window.ecent.cancelBubble=true;

2、Event对象不是事件处理程序的函数参数,而是window的全局变量。
           3、事件注册函数:attachEvent()和反注册:detachEvent().
     
Netscape4事件模型
          由于Netscape好像已经完全停止开发,所以就不详述了,简单的说:就是只捕捉不起泡。

后话:DOM的实现模范本来应该是FireFox。不过就事件注册的标准度上,Opera实现的好象更严格一点。参见《关于DOM事件模型的两件事》http://www.marchbox.com/blog/2-things-about-dom-events-model/

时间: 2024-10-20 22:37:32

JS事件模型小结的相关文章

js 事件模型详解

把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直接令回调函数为null,复制给dom对象的事件属性即可. DOM2级,则通常使用addEventListener和removeEventListener两个事件注册和事件移除函数来完成. 事件发生过程,大概可以包括为捕获阶段,目标阶段和冒泡阶段.三个步骤,第一阶段:从html元素到绑定的dom元素之

[js]事件模型及事件代理/委托

原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 1.事件的三个阶段:事件捕获.目标.事件冒泡 (低版本的IE不支持捕获) 2.传统.IE和W3C不同绑定事件.解绑事件的方法有什么区别,参数分别是什么,以及事件对象e有什么区别 传统方法: element.onclick = function(e){ // ... }; 传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很

js事件模型与自定义事件

JavaScript 一个最简单的事件模型,需要有事件绑定与触发,也许还要有事件删除. 1 var eventModel = { 2 list: {}, 3 4 bind: function () { 5 var args = [].slice.apply(arguments), 6 type = args[0], 7 handlers = args.slice(1); 8 9 if (typeof type === 'string' && handlers.length > 0)

js事件模型

事件流:(1)事件冒泡:先响应事件源,再响应父容器: (2)事件捕获:先响应父容器,再响应事件源: (3)事件处理:可以先响应事件源,也可以先响应父容器. 事件处理程序分现代事件处理和传统事件处理,二者的区别是: (1)传统事件只能绑定一个函数,浏览器能够兼容: (2)现代事件能绑定多个函数,在运行时要处理浏览器兼容问题.

js中的Dom事件模型以及表格方面等内容

1.实现评论页面的制作 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 1000px; margin: 0 auto; border: 1px solid #E7EAEE; overflow: hidden; pad

JS的事件模型

之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的 局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开 始淡出记忆中,就像我现在已经开始淡忘C语言的指针.麦克斯韦方程组.矩阵的变换.最小二乘 法等.知识就像五彩缤纷的鹅卵石铺垫在你前行的道路上,从简单到深刻,从深刻到领悟,一直 助你渐行渐远.回头看看事件模型呗. 一.事件简简介事件包括:鼠标事件键盘事件框架事件 onerror onresize onscroll等表单事件事件 onb

js 事件小结

1,事件对象   e || window.event //ie   2, 取鼠标点击坐标 带有滚动条的   var top = document.documentElement.scrollTop || document.body.scrollTop;//chorme var x = top + e.clientX; //可视区坐标   3, 获取屏幕坐标 e.screenX e.screenY   4, shiftKey altKey ctrlkey   5,onkeydown/onkeyup

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

【JS】DOM事件模型

DOM事件模型主要包含4个方面的内容,分别是: 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下: 首先,什么是DOM?文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API).一般的,支持Javascript的所有浏览器都支持DOM. 在DOM眼中,HTML跟XML一样是一种树形结构的文档,<html>是根(root)节点,<head>.<title>.<body>是<