js学习笔记之事件处理模型

在各种浏览器中存在四种事件模型：原始事件模型、标准事件模型、IE事件模型，还有一种Netscape4事件模型，下面具体介绍一下。

1、目前共存在四种事件处理模型分别是：原始事件模型、标准事件模型、IE事件模型，还有一种Netscape4事件模型，但基本可忽略

2、事件处理模型又可以分为基本事件处理和高级事件处理两种，原始事件模型属于基本事件处理，标准事件模型和IE事件模型属于高级事件处理

一、基本事件处理：

基本事件处理主要是指原始事件模型实现的事件处理。其主要分为以下两种：

（1）、作为HTML标签性质的事件处理，比如 <div onmouseover=”var a=1; alert();”>……</div>           //在这里，onmouseover只是一个代表，还包含其他很多事件

在这种方式中，赋给onmouseover等事件处理函数的是JS代码串，系统会把这些代码串自动包装在一个匿名函数中。其中可以有this关键字，它指向的是这个标签元素，也可以有event关键字，它表示的是事件发生时的事件对象（用在标准浏览器中）。如<div onmouseover=”f(this,event);”>……</div>

 其实我们可以把onmouseover等看成是一个函数，在没给它赋值前，它就是一个空函数。给它赋了js代码后，就相当于往空函数里添加了代码。因为onmouseover等其实是一个函数，所以我们可以显示的调用它，例如 element.onmouseover(),但这样并不会引起mouseover事件的真正发生。

可以给事件函数（即onmoouseover等）返回false来举止默认动作的发生。

函数是运行在定义它的作用域中，因此如果给事件处理函数赋值js代码，就相当于是在这个HTML标签环境中定义了一个函数，这种环境比较特殊，它的高一级的作用域并不是window全局对象环境，在这两者之间还相隔这至少一种作用域环境。而在<script>中定义的函数，它的高一级作用域环境就是window(当然嵌套函数又要另当别论)。所以，在HTML标签中，最好把代码放在一个在<script>中定义的函数里，然后再把这个函数调用赋给事件函数,即<div onmouseover=“function();”>……</div>

(2)、作为javascript属性的事件处理    比如element.onmouseover=function(){……}

注意在这种方式，不能再给事件处理函数赋值js代码串了，而是直接把函数（不是函数调用）赋给它，或是赋一个匿名函数，如 element.onmouseover=function(){……}  或    element.onmouseover=f； f为一个函数，在这里不能加上括号

基本事件处理也会以冒泡的形式向上传播

 二、高级事件处理：

高级事件处理只要是指标准事件模型和IE事件模型实现的事件处理。