javascript事件模型介绍

在各种浏览器中，存在三种不同的事件模型：原始事件模型、DOM2事件模型和IE事件模型。其中，原始事件模型得到了所有浏览器的广泛支持，而DOM2事件模型则受到除IE之外的所有主流浏览器的青睐。

一、原始事件模型

在原始事件模型中，事件类型主要分为输入事件和语义事件。输入事件如点击事件（onclick），语义事件如提交事件（onsubmit）。这些事件可以通过两种主要方式注册事件处理程序。

首先是将JavaScript代码直接作为HTML元素的值。例如，一个按钮可以点击后弹出警告框，代码可能如下：

第二种方式是将事件处理程序作为JavaScript属性。每个HTML元素在文档树中都有一个相应的JavaScript对象，这些对象的属性对应于HTML元素的属性。无论是作为HTML属性的JavaScript代码还是作为JavaScript属性的事件处理程序，它们本身的属性都是函数。例如，给按钮添加鼠标悬停事件处理程序的代码可能如下：

第一种赋值方式：document.f1.b1.onclick=function(){alert('thanks');};

第二种赋值方式：function plead(){window.status="Please Press Me!";} document.f1.bi.onmouseover=plead;

作为JavaScript属性的事件处理程序可以通过JavaScript属性显式调用。例如，可以调用表单的提交事件处理程序：document.myfrom.onsubmit();

事件处理程序可以通过返回false来阻止浏览器执行事件的默认动作。这在处理onsubmit事件时特别有用，例如表单提交时进行的验证。如果验证失败，可以通过返回false来阻止表单提交。这种机制使得开发者能够更精细地控制浏览器行为，提供更好的用户体验。Javascript中的事件模型与对比：从冒泡到捕捉阶段

当我们超链接的mouseover事件中的window.status显示事件时，一种特定的行为引起我们的注意：返回true。例如，当我们在HTML代码中这样写：help时，超链接上的鼠标悬停动作会触发这个事件，显示帮助信息而不进行页面跳转。这是因为事件处理函数返回了true，阻止了事件的默认行为。这正是事件模型的一个实际应用。那么接下来我们来谈谈几种常见的JavaScript事件模型。

一、DOM2事件模型

DOM2事件模型参考了IE的气泡模型并得到了w3c的规范制定。在这个模型中，事件的传播过程不再仅仅是直接调用事件句柄，而是经过了三个阶段：

首先是捕获阶段（capturing phase）：事件从document开始，向下传播到目标元素。在这个过程中，任何对特定事件感兴趣的祖先元素都可以注册自己的处理函数。这一阶段是所有事件类型都会经历的。

接着是目标阶段（target phase）：事件到达目标元素，执行目标元素的事件处理函数。这是最直接处理事件的阶段。

最后是冒泡阶段（bubbling phase）：事件从目标元素开始，向上传播回到document。只有部分事件会经历这个阶段，例如submit事件就不会被上浮。在整个过程中，我们可以调用event.stopPropagation()来阻止事件的进一步传播，调用preventDefault()来阻止浏览器的默认行为。在DOM2模型中，事件的注册和删除是通过addEventListener和removeEventListener方法完成的。

二、IE模型

IE模型也有自己的事件处理方式。它提供了一个event对象来封装事件的详细信息。这个对象不是作为事件处理函数的参数传入，而是作为全局对象window的一个属性。IE的事件传播模式对应于DOM2的第二和第三阶段。事件的注册和删除是通过元素的attachEvent和detachEvent方法完成的，这与DOM2有所不同。IE模型的特点在于它的传播过程只有起泡没有捕捉，并且事件的Event对象不是函数的参数，而是window的全局变量。事件的注册和反注册使用的是特定的函数。

三、 Netscape模型

由于Netscape似乎已经停止开发，因此这个模型不再详细阐述。简单来说，Netscape4的事件模型只捕捉不起泡。这些模型反映了不同浏览器在处理事件时的差异，开发者需要根据目标用户的浏览器类型来选择合适的事件处理方式。以上就是JavaScript事件模型的基本介绍，希望能为大家提供一个参考。也希望大家能多多支持狼蚁SEO的深入研究和分享。至于提到的“cambrian.render('body')”，这似乎是一个特定的函数调用，可能是某个库或框架中的方法，不在上述讨论范围内。