脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → js事件模型

javascript事件模型介绍

 更新时间：2016年05月31日 09:49:18   作者：zqstc  
在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持。

一、原始事件模型

其事件类型:分为"输入事件(如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好像已经完全停止开发，所以就不详述了，简单的说：就是只捕捉不起泡。

以上就是javascript事件模型基本的介绍，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript入门教程 Cookies

    JavaScript入门教程 Cookies

    使用 Cookies　　我们已经知道，在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么？
    2009-01-01
  • 深入理解JavaScript系列（19）：求值策略(Evaluation strategy)详解

    深入理解JavaScript系列（19）：求值策略(Evaluation strategy)详解

    这篇文章主要介绍了深入理解JavaScript系列（19）：求值策略(Evaluation strategy)详解,本文讲解了一般理论、按值传递、按引用传递、按共享传递（Call by sharing）、按共享传递是按值传递的特例等内容,需要的朋友可以参考下
    2015-03-03
  • JavaScript中的内置对象介绍

    JavaScript中的内置对象介绍

    这篇文章介绍了JavaScript中的内置对象，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • JavaScript For 循环

    JavaScript For 循环

    JavaScript For 循环...
    2007-04-04
  • Javascript 学习笔记之 对象篇（二） : 原型对象

    Javascript 学习笔记之 对象篇（二） : 原型对象

    Javascript 并没有类继承模型，而是使用原型对象 prototype 进行原型式继承。尽管人们经常将此看做是 Javascript 的一个缺点，然而事实上，原型式继承比传统的类继承模型要更加强大。举个例子，在原型式继承顶端构建一个类模型很简单，然而反过来则是个困难得多的任务。
    2014-06-06
  • 浅析document.ready和window.onload的区别讲解

    浅析document.ready和window.onload的区别讲解

    这篇文章主要介绍了document.ready和window.onload的区别，有需要的朋友可以参考一下
    2013-12-12
  • 实例分析javascript中的call()和apply()方法

    实例分析javascript中的call()和apply()方法

    因项目需求去研究了下javascript中的call和apply方法，去百度看了几篇介绍JS中call和apply的文章，总觉得不是很好懂，这里写下我自己的理解，供网友们参考。
    2014-11-11
  • Ajax的概述与实现过程

    Ajax的概述与实现过程

    Ajax是Asynchronous JavaScript XML的简写，不是一门新技术，而是对现有技术的综合利用。本文详细介绍了Ajax的概述与具体实现方法。有需要的朋友可以看下，希望对你有所帮助
    2016-11-11
  • js中document.write的那点事

    js中document.write的那点事

    document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言
    2014-12-12
  • JavaScript ES6箭头函数使用指南

    JavaScript ES6箭头函数使用指南

    JavaScript ES6箭头函数是一个来自ECMAScript 2015（又称ES6）的全新特性,有传闻说，箭头函数的语法=>，是受到了CoffeeScript 的影响，并且它与CoffeeScript中的=>语法一样，共享this上下文
    2018-12-12

最新评论