`

JS事件模型小结

 
阅读更多
JS事件模型小结
详细请参考
http://www.blogjava.net/mxx/archive/2006/11/16/81626.html
         前几天看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好像已经完全停止开发,所以就不详述了,简单的说:就是只捕捉不起泡。
        

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

相关推荐

    JavaScript事件学习小结(一)事件流

    标题中的"JavaScript事件学习小结(一)事件流"指的是JavaScript中的事件处理机制,特别是事件流的概念。事件流描述了在DOM(文档对象模型)中事件如何从根节点传播到具体的元素节点。在JavaScript中,事件是用户与...

    JavaScript事件学习小结(三)js事件对象

    不同的浏览器和事件模型对事件对象的处理有所不同,但它们的核心概念是相同的。 1、认识事件对象 当触发一个事件,比如点击、鼠标移动、按键等,浏览器就会产生一个事件对象。在JavaScript中,我们通常使用event这...

    JS 控件事件小结

    概述: 事件对于控件来说至关重要,控件的消息通信机制使用事件的成本最低,但是对于JS控件来说有一些麻烦需要解决,JS类本身不支持事件,DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件...

    JavaScript初学小结

    JavaScript初学小结 在IT领域,JavaScript是一种广泛使用的编程语言,主要用于网页和网络应用的开发。这篇小结将深入探讨JavaScript的基础知识,包括语法、数据类型、控制结构、函数、对象以及它在实际开发中的应用...

    第3章+JavaScript事件处理.pdf

    ### JavaScript事件处理详解 #### 一、事件与事件处理概览 在JavaScript编程中,**事件**被视为用户与网页互动的桥梁,它们涵盖了从简单的鼠标移动到复杂的拖拽操作等一系列行为。事件处理则是指通过JavaScript...

    Javascript 浏览器事件小结

    ### Javascript 浏览器事件小结知识点 #### 1. Javascript事件概述 Javascript事件是与浏览器中的DOM(文档对象模型)对象相关联的。在浏览器执行Javascript代码时,事件处理与DOM模型紧密相关,允许开发者响应...

    Pure JS (7):小结

    标题中的“Pure JS (7):小结”表明这是一篇关于JavaScript编程的系列教程的第七部分,重点在于总结前面几部分所讲解的核心概念和技巧。JavaScript,也称为JS,是一种广泛用于网页和网络应用的脚本语言,尤其在前端...

    页面常用的JS脚本小结

    JavaScript,简称JS,是网页开发中不可或缺的一部分,主要用于实现页面的动态效果和交互性。这里我们来详细探讨一下"页面常用的JS脚本"这一主题,以及如何利用它们提升用户体验。 1. **DOM操作**:JavaScript通过...

    javascript面试应急知识点小结

    这篇小结将聚焦于JavaScript的基础和进阶知识,帮助你在面试中表现出色。以下是对"javascript面试应急知识点小结"的详细解析。 一、基础概念 1. 变量与数据类型:JavaScript有七种数据类型,包括基本数据类型...

    javascript对象的相关操作小结

    浏览器对象模型是JavaScript与浏览器交互的基础,其中`window`对象是核心。它包含了如`document`、`location`和`history`等子对象。例如,我们可以通过`window.document`访问文档对象,通过`window.location`获取或...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6...

    ASP.NET MVC 5 with Bootstrap and Knockout

    小结 第2章Bootstrap介绍 默认菜单 含有下拉列表和搜索框的菜单 按钮 警告框 主题 小结 第3章Knockout.js介绍 安装Knockout.js 基本示例 何为MVVM? 创建ViewModel 小结 第4章数据库应用 Entity ...

    Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)

    这篇文章重点讲解了如何使用JavaScript操作DOM事件,特别是在监听鼠标相关事件上的技巧和实践。 ### 1. 鼠标点击(click)事件 在HTML元素上绑定点击事件是最常见的操作之一。通过onclick事件属性,当用户点击元素...

    JavaScript+DOM编程艺术

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 (由于文件大小的关系,分成三部分上传,请注意下载) 第1章 JavaScript简史 ... 5.6 小结

    javascript小结

    ### JavaScript小结 #### BOM(Browser Object Model):浏览器对象模型 BOM 是一个包含浏览器窗口相关的属性、方法和事件的对象模型。它允许开发者控制浏览器窗口并与其交互。主要对象包括 `window`、`document`...

    JavaScript+DOM编程艺术(二)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史  1.1 JavaScript的起源  1.2 浏览器之争 ... 5.6 小结

    JavaScript+DOM编程艺术(一)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史  1.1 JavaScript的起源  1.2 浏览器之争 ... 5.6 小结

    小结Node.js中非阻塞IO和事件循环

    即使是处理复杂的业务逻辑,Node.js也可以通过异步编程模型,将任务分解为可以并发执行的小单元,进一步提高程序的效率。 总结来说,非阻塞IO和事件循环是Node.js的两大技术基石,它们共同定义了Node.js如何处理高...

Global site tag (gtag.js) - Google Analytics