Dojo 事件机制：浏览器事件统一处理方法介绍

最新推荐文章于 2021-12-27 13:55:15 发布

ibmjournal

最新推荐文章于 2021-12-27 13:55:15 发布

阅读量1k

点赞数

分类专栏： Open Source Web开发文章标签： dojo 浏览器 javascript button 脚本 input

本文链接：https://blog.csdn.net/ibmjournal/article/details/3072755

版权

Web开发同时被 2 个专栏收录

156 篇文章 0 订阅

订阅专栏

Open Source

83 篇文章 0 订阅

订阅专栏

事件是用户与站点进行交互的基础。现在的浏览器采用的事件处理方法千差万别，为了屏蔽这些差异，Dojo 提供了统一的事件处理方法。开发人员可以使用 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" οnclick="sayHello()" value="hello" /> 
 </body> 
 </html>

清单 1 应该是最为 web 开发人员熟知的事件处理方式了，直接把事件处理函数和控件上的事件属性绑定起来。当用户点击 hello 按钮时，将调用 sayHello() 函数。当然也可以把事件处理函数的代码作为 onclick 的值，参见清单 2，使用这种方式时，onclick 对应的处理脚本应比较简单短小，在 onclick 后面写上一大串 javascript 脚本可不是什么好主意。

清单 2

				
 <html> 
 <body> 
 <input id="btn" type="button" οnclick="javascript:alert('hello');" value="hello" /> 
 </body> 
 </html>

另一种略微高级的方法是在控件之外绑定控件的事件处理函数，见清单 3 。

清单 3

				
 <html> 
 <body> 
 <input id="btn" type="button"  value="hello" /> 
 <script> 
 document.getElementById("btn").onclick=sayHello; 
 function sayHello() { alert('Hello'); } 
 </script> 
 </body> 
 </html>

在清单 3 的例子中，首先通过 document.getElementById 获取需要绑定事件的控件，再把控件的 onclick 事件设置为事件处理函数，其效果与前面的例子是一样的。需要注意的是，script 脚本放到了控件后面，因为使用了 document.getElementById 去获控件，而 javascript 是解释执行的，必须保证控件在执行到 getElementById 之前已经创建了，否则会出现找不到控件的错误。但 sayHello 为什么会在事件绑定语句的后面呢？按照刚才的原则，不是必须确保 sayHello 已经预先定义好了吗？其实不然，事件处理函数的代码直到事件发生时才被调用，此时才会检查变量是否已经定义，函数是否存在，而页面初次加载时按钮上的 click 事件是不会发生的。页面加载后用户再点击按钮，sayHello 函数已经完全加载到页面中，函数是存在的。当然如果是普通的函数调用，一定要保证被调用函数出现在调用函数之前。采用清单 3 所示的这种方式时，在 web 应用比较复杂时，可以把事件处理函数集中放在一起，比如单独存放在一个文件中，方便以后查找，修改。这个例子也很好的说明了 javascript 是一种解释执行的脚本语言。

前面三种事件处理方式是在 W3C DOM Level0 中定义的，是不是简单易用？但是似乎太简单了，缺少一些东西。首先一个事件只能绑定一个处理函数，不支持多个事件处理函数的绑定。如果开发人员被迫把事件处理代码都放在一个函数中，代码的模块性会很差。其次解除事件处理函数的绑定的方式很不友好，只能把它设为空值或者空串。

 document.getElementById("btn").οnclick=null; 
 document.getElementById("btn").οnclick="";

W3C DOM Level2 标准有了新的事件模型，新模型最大的变化有两点：

本文转自IBM Developerworks中国

请点击此处查看全文

ibmjournal

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录