javascript事件模型介绍

一、原始事件模型

其事件类型:分为"输入事件(如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事件模型基本的介绍，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 带你快速理解javascript中的事件模型

    带你快速理解javascript中的事件模型

    javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一.  DOM0级事件模型 DOM0级事件模型是早期的事件模型,所有的浏览器都是支持的,而且其实现也是比较简单.代码如下: <p id = 'click'>click me</p> <script> document.getElementById('click').onclick = function(event){ alert(

  • javascript事件模型实例分析

    本文实例讲述了javascript事件模型的用法.分享给大家供大家参考.具体分析如下: 一.事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递 二.事件对象 在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件

  • ASP.NET的事件模型(很适合学习的文章)

    在Default.aspx的页面中第一行是一条页面指令: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspxEventsModel._Default" %> 其中CodeBehind属性指定代码隐藏页面的名称,Inherits指定所属的命名空间和类,AutoEventWireup属性是可以

  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q

  • js事件模型与自定义事件实例解析

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = [].slice.call(arguments), type = args[0], handlers = args.slice(1); if (typeof type === 'string' && handlers.length > 0) { for (var i = 0; i &l

  • js DOM模型操作

    DOM模型中的节点:元素节点.文本节点.属性节点 例:<a href="http://www.cnblogs.com/shuz">私のdotnet小屋</a> (1)a是元素节点 (2)"私のdotnet小屋"是文本节点 (3)href="http://www.cnblogs.com/shuz"是属性节点 DOM节点的属性 属性 类型 说明 nodeName String 节点名称,根据节点的类型而定义 nodeValue

  • 关于javascript DOM事件模型的两件事

    关于javascript DOM事件模型的两件事

    事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling).下面这个图能大概的说明整个过程: (from W3C) 如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了.例如: 复制代码 代码如下: document.getElementById('foo').addEvent

  • 事件模型在各浏览器中存在差异

    事件模型在各浏览器中存在差异

    标准参考 根据 W3C DOM 2 Events 描述,EventTarget 接口被所有支持 DOM 事件模型的节点(Node)实现. 该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget. DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法. 实现 Event 接口的对象一般作为第一个参数传入事件处理

  • Javascript基础知识（一）核心基础语法与事件模型

    一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途? 1.可以控制网页中所有元素,增加.删除.修改元素的属性. 2.可以在html中放入动态文本. 3.响应用户在使用网页时产生的事件. 4.校验用户输入的数据. 5

  • javascript事件模型介绍

    一.原始事件模型 其事件类型:分为"输入事件(如onclicki)"和"语义事件(如onsubmit)" 事件程序的注册可以以下几种方式: 1.JS代码作为HTML性质值 复制代码 代码如下: <input type="button" value="Press me" onclick="alert('thanks');" 2.事件处理程序作为JS属性 附注:文档中的每个HTML元素在文档树中都有一个相

  • JavaScript 事件对象介绍

    JavaScript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能; 最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况; 此外还可以修改一般事件的捕获/冒泡流的函数; 一 事件对象 // 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前事件的上下文信息; // 事件处理由三部分组成:对象.事件处理函数=函数; document.onclick = function(){ alert('Lee'); } // PS:以上程序解

  • javascript事件模型代码

    本节稍稍深入地讨论关于事件处理的话题,如果你对模式.闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关内容之后再回过头来阅读它,相信你会有很大收获. 1 事件处理模式 在程序设计领域,"事件处理"是一种模式,当一个对象受外部影响而改变状态时,通过消息的方式将这个状态改变通知给这个对象或者相关联的某个对象,让它执行对应的动作,这就是事件处理的基本原理.负责通知状态改变的对象被称作"消息",而执行响应动作的属性则被称作"事件代理".        

  • javascript 事件处理程序介绍

    1.DOM0级事件处理程序 将一个函数值给一个事件处理程序属性. 例如: 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" } 删除事件,btn.onclick = null; -----------------------------------------------------------------

  • javascript事件循环event loop的简单模型解释与应用分析

    本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考,具体如下: js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能.那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉.这里采用很通俗的理解方式介绍下event loop. event loop顾名思义是事件循环,既然是循环,那循环的是什么呢? 对于一个js文件, 1,执行

随机推荐