Dojo 事件机制:浏览器事件统一处理方法介绍
2008-10-14 10:19
591 查看
事件是用户与站点进行交互的基础。现在的浏览器采用的事件处理方法千差万别,为了屏蔽这些差异,Dojo
提供了统一的事件处理方法。开发人员可以使用 Dojo 的简单连接或者订阅/发布模式来进行事件处理,本文将对这些知识进行一一介绍。
DOM 事件模型
事件是用户与浏览器交互的基础,用户在界面的操作产生事件,浏览器捕获事件后对用户作出反馈。 Ajax 技术通过引入异步调用使 web
应用的开发产生了革命性的变化,另一方面 Ajax 也使广大开发人员认识到用户和浏览器的交互可以如此精彩,Web
页面不再死板,开始鲜活起来,开发人员也不再厌恶编写 javascript 的事件处理代码。在 web 页面中,事件一般作用于 DOM 树节点,所以有必要先了解
DOM 的事件模型,包括模型支持那些事件,如何处理 DOM 树结构上的节点的事件等。
清单 1
清单 1 应该是最为 web 开发人员熟知的事件处理方式了,直接把事件处理函数和控件上的事件属性绑定起来。当用户点击 hello 按钮时,将调用
sayHello() 函数。当然也可以把事件处理函数的代码作为 onclick 的值,参见清单 2,使用这种方式时,onclick
对应的处理脚本应比较简单短小,在 onclick 后面写上一大串 javascript 脚本可不是什么好主意。
清单 2
另一种略微高级的方法是在控件之外绑定控件的事件处理函数,见清单 3 。
清单
3
在清单 3 的例子中,首先通过 document.getElementById 获取需要绑定事件的控件,再把控件的 onclick
事件设置为事件处理函数,其效果与前面的例子是一样的。需要注意的是,script 脚本放到了控件后面,因为使用了 document.getElementById
去获控件,而 javascript 是解释执行的,必须保证控件在执行到 getElementById 之前已经创建了,否则会出现找不到控件的错误。但
sayHello 为什么会在事件绑定语句的后面呢?按照刚才的原则,不是必须确保 sayHello
已经预先定义好了吗?其实不然,事件处理函数的代码直到事件发生时才被调用,此时才会检查变量是否已经定义,函数是否存在,而页面初次加载时按钮上的 click
事件是不会发生的。页面加载后用户再点击按钮,sayHello
函数已经完全加载到页面中,函数是存在的。当然如果是普通的函数调用,一定要保证被调用函数出现在调用函数之前。采用清单 3 所示的这种方式时,在 web
应用比较复杂时,可以把事件处理函数集中放在一起,比如单独存放在一个文件中,方便以后查找,修改。这个例子也很好的说明了 javascript
是一种解释执行的脚本语言。
前面三种事件处理方式是在 W3C DOM Level0
中定义的,是不是简单易用?但是似乎太简单了,缺少一些东西。首先一个事件只能绑定一个处理函数,不支持多个事件处理函数的绑定。如果开发人员被迫把事件处理代码都放在一个函数中,代码的模块性会很差。其次解除事件处理函数的绑定的方式很不友好,只能把它设为空值或者空串。
W3C DOM Level2 标准有了新的事件模型,新模型最大的变化有两点:
本文转自IBM Developerworks中国
请点击此处查看全文
提供了统一的事件处理方法。开发人员可以使用 Dojo 的简单连接或者订阅/发布模式来进行事件处理,本文将对这些知识进行一一介绍。
DOM 事件模型
事件是用户与浏览器交互的基础,用户在界面的操作产生事件,浏览器捕获事件后对用户作出反馈。 Ajax 技术通过引入异步调用使 web
应用的开发产生了革命性的变化,另一方面 Ajax 也使广大开发人员认识到用户和浏览器的交互可以如此精彩,Web
页面不再死板,开始鲜活起来,开发人员也不再厌恶编写 javascript 的事件处理代码。在 web 页面中,事件一般作用于 DOM 树节点,所以有必要先了解
DOM 的事件模型,包括模型支持那些事件,如何处理 DOM 树结构上的节点的事件等。
清单 1
<html> <body> <script> function sayHello() { alert("hello!"); } </script> <input id="btn" type="button" onclick="sayHello()" value="hello" /> </body> </html> |
sayHello() 函数。当然也可以把事件处理函数的代码作为 onclick 的值,参见清单 2,使用这种方式时,onclick
对应的处理脚本应比较简单短小,在 onclick 后面写上一大串 javascript 脚本可不是什么好主意。
清单 2
<html> <body> <input id="btn" type="button" onclick="javascript:alert('hello');" value="hello" /> </body> </html> |
清单
3
<html> <body> <input id="btn" type="button" value="hello" /> <script> document.getElementById("btn").onclick=sayHello; function sayHello() { alert('Hello'); } </script> </body> </html> |
事件设置为事件处理函数,其效果与前面的例子是一样的。需要注意的是,script 脚本放到了控件后面,因为使用了 document.getElementById
去获控件,而 javascript 是解释执行的,必须保证控件在执行到 getElementById 之前已经创建了,否则会出现找不到控件的错误。但
sayHello 为什么会在事件绑定语句的后面呢?按照刚才的原则,不是必须确保 sayHello
已经预先定义好了吗?其实不然,事件处理函数的代码直到事件发生时才被调用,此时才会检查变量是否已经定义,函数是否存在,而页面初次加载时按钮上的 click
事件是不会发生的。页面加载后用户再点击按钮,sayHello
函数已经完全加载到页面中,函数是存在的。当然如果是普通的函数调用,一定要保证被调用函数出现在调用函数之前。采用清单 3 所示的这种方式时,在 web
应用比较复杂时,可以把事件处理函数集中放在一起,比如单独存放在一个文件中,方便以后查找,修改。这个例子也很好的说明了 javascript
是一种解释执行的脚本语言。
前面三种事件处理方式是在 W3C DOM Level0
中定义的,是不是简单易用?但是似乎太简单了,缺少一些东西。首先一个事件只能绑定一个处理函数,不支持多个事件处理函数的绑定。如果开发人员被迫把事件处理代码都放在一个函数中,代码的模块性会很差。其次解除事件处理函数的绑定的方式很不友好,只能把它设为空值或者空串。
document.getElementById("btn").onclick=null; document.getElementById("btn").onclick=""; |
本文转自IBM Developerworks中国
请点击此处查看全文
相关文章推荐
- js事件驱动机制 浏览器兼容处理方法
- 事件处理程序实现的另一种方法:浏览器的事件监听机制实现“1事件对应n事件处理程序”(Javascript)
- JavaScript跨浏览器处理事件方法(封装成对象)
- JQuery入门――用bind方法绑定事件处理函数应用介绍
- Chromium网页输入事件处理机制简要介绍和学习计划
- 各种浏览器全屏模式的方法、属性和事件介绍
- JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
- 处理事件的方式:两种类的覆盖处理(自己管理,覆盖专用事件函数;自己统一管理,覆盖QWidget::Event通用函数),一种对象的处理(父控件统一管理,即安装过滤器),两种全局处理(QCoreApplication安装过滤器;覆盖notify方法)
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
- 浏览器兼容问题项目总结(三)事件处理机制
- 各种浏览器全屏模式的方法、属性和事件介绍
- Android中UI控件的详细介绍(八)——Android事件处理机制的概述
- html5新功能1—各种浏览器全屏模式的方法、属性和事件介绍
- WinForm枚举容器中的控件,实现控件统一事件处理机制
- 【js事件详解】js事件封装函数,js跨浏览器事件处理机制
- 捕获浏览器关闭、刷新事件不同情况下的处理方法
- javascript打造跨浏览器事件处理机制
- javascript打造跨浏览器事件处理机制[Blue-Dream出品]
- jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()