《众妙之门——JavaScript与jQuery技术精粹》——1.4 事件代理

1.4 事件代理

事件使得网络应用可以工作,我最爱事件,尤其是定制事件。它的存在,使得用户不需要接触核心代码就可以使产品具有更好的可拓展性。但主要的问题(其实也是它的优势)在于,事件会被HTML删除:对元素添加了事件监视器后它将被激活,但在HTML中无法表示这种情况。可以这样抽象地来考虑(这对初学者可能有困难):诸如IE6之类的浏览器内存问题较多,事件处理量大,因此不要使用太多的事件处理是明智的选择。

这里就是事件代理 的来源。当某一特定的元素或者其上DOM层的所有元素发生某一事件时,可以通过单一的处理程序对父元素进行处理来简化事件处理过程,而不是使用大量的程序。

我的意思是什么?比如说想要获得一个链接列表,而且想要通过函数的调用而不是通过加载来获得,其HTML实现方法如下:

通常事件处理程序是在整个链接中使用循环:

也可通过一个事件处理程序来实现:

因为单击事件发生在列表中所有的元素之上,所以你所要做的就是将节点Name与 需要响应事件的元素进行对比。

说明:以上例子在IE6浏览器中会运行失败。对于IE6,需要使用事件模型而不是W3C,这就是我们在这种情况下使用库的原因。

这种方法的好处在于可以使用单独的事件处理程序。例如,想要在列表中动态地进行添加操作,如果使用事件代理,则不需要进行任何改变,只需在事件处理过程中重新分配处理程序并对列表重新进行循环操作就可以了。

时间: 2024-09-20 19:10:03

《众妙之门——JavaScript与jQuery技术精粹》——1.4 事件代理的相关文章

《众妙之门——JavaScript与jQuery技术精粹》——导读

前 言 众妙之门--JavaScript与jQuery技术精粹 对于网站开发设计人员而言,在面对选择解决方案时做出正确的决定并不容易.不论是在建立复杂的网站应用还是在改进网站的过程中,都会有很多前期解决方案可供选择,有时选择最合适的一款方案至关重要.本书着重讲述了在选择相应解决方案时务必要注意的事项,即是否稳定并易于定制.是否有实用性并易于理解.是否具有可维护性.兼容性,以及功能的可拓展性. 本书重点阐述了检验代码的重要性以及在执行JavaScript程序时需要避免的问题.所选择的解决方案应能符

《众妙之门——JavaScript与jQuery技术精粹》——第1章 初学JavaScript 需知的七件事 1.1 缩略标记

第1章 初学JavaScript 需知的七件事 我很早以前就开始编写JavaScript代码,很高兴看到这种语言在今天所取得的成功,能成为这个成功故事中的一部分我很开心.关于JavaScript,我写过许多文章.章节以及一整本书,直到今天我仍在寻找新的东西.下文是一些我工作学习过程中激动时刻的记录,大家与其守株待兔,不如自己尝试去体会这种感受. 1.1 缩略标记 众妙之门--JavaScript与jQuery技术精粹 在创建对象和数组过程中可以使用缩略标记是我喜欢JavaScript的重要原因之

《众妙之门——JavaScript与jQuery技术精粹》——1.8 特定于浏览器的代码就是浪费时间,试试库文件

1.8 特定于浏览器的代码就是浪费时间,试试库文件 在我进行网络开发之初,利用document.all还是document.layers来访问文件还存在很大的争议.我当时选择了document.layers方式,因为我喜欢将层作为当前层文件的思想(我为此还编写了大量document.write方法).这两种方式后来都被淘汰了.Netscape 6问世以后,它仅支持W3C DOM模型,我非常喜欢这种方式,但是终端用户并不在意这些,他们看到的只是这种浏览器没有正确显示大部分互联网内容(实际上是显示了

《众妙之门——JavaScript与jQuery技术精粹》——2.6 JavaScript代码复查实例

2.6 JavaScript代码复查实例 最近一位开发人员让我对他的代码进行复查并提供改进建议.虽然我并不是代码复查专家(不要被我上面所说的忽悠),我在这里还是给出我提出的问题和解决方案. 问题1问题:函数和对象没经过任何类型校验就作为参数传递给其他函数. 回复:类型校验是保证输入类型的必要步骤,如果没有进行检查,可能就有输入类型(字符串.日期.数组等)不确定的风险,这些可以轻易地毁掉你未经防御处理的应用程序.对于函数,至少应该进行以下处理: 1.测试以确保传递的变量真实存在: 2.进行type

《众妙之门——JavaScript与jQuery技术精粹》——第2章 复查JavaScript 代码的启示2.1 简介

第2章 复查JavaScript 代码的启示 在开始之前,我想问一个问题:你最近一次复查代码是什么时候?代码复查应该是提高整体解决问题能力的最好方式,如果没有利用好它,将会错过发现漏洞和聆听建议的机会,而这些正是使你的代码更加完美所需的. 没有人能写出100%没有漏洞的代码,所以不要为寻求帮助感到羞愧.我们行业中一些非常有经验的开发者,包括架构师和浏览器开发师都会经常要求别人来复查他们的代码,询问别人是否有地方可以改进以避免发生尴尬.代码复查应该被当成一项和其他技术方式解决问题同等重要的方法.

《众妙之门——JavaScript与jQuery技术精粹》——2.2 在哪里可以使代码得到复查?

2.2 在哪里可以使代码得到复查? 一般最具挑战性的部分在于找到一个值得信任的有经验的开发者来帮我们复查.以下是一些可以请求别人复查代码的地方(有时是别国语言). . JSMentorsJSMentors是一个讨论JavaScript相关内容的邮件列表,其复查面板中有一大批有经验的开发者(包括JD Dalton.Angus Croll和Nicholas Zakas)在复查人员名单上.这些老师不一定一直在线,但是对于提交的代码他们都会尽全力提供有用的.建设性的反馈意见.如果希望获得的是基于某种特殊

《众妙之门——JavaScript与jQuery技术精粹》——1.7 与后台交互

1.7 与后台交互 这些年使用JavaScript的经验告诉我:JavaScript包含丰富的交互接口,但在进行数据处理和数据库访问时效果不佳. 最初,我用JavaScript代替Perl的原因是厌倦了每次要将代码复制到目录文件夹中才能运行的情况.后来我学会了利用后台程序来处理数据,而不是将所有的功能用JavaScript来实现,这样使得代码在安全性和语言性上都得到了提高. 访问一个Web服务时,可以得到JSON-P格式的返回值并在客户机上进行大量的数据转换.但是为什么在已经有了服务器并有更多的

《众妙之门——JavaScript与jQuery技术精粹》——1.2 JSON数据格式

1.2 JSON数据格式 在我发现使用JSON存储数据之前,我试过使用各种JavaScript自带的格式来存储内容:带有控制字符进行分隔的数组.字符串等.Douglas Crockford所发明的JSON彻底改变了这一切.运用JSON,你可以使用JavaScript自带的格式存储各种复杂的数据并且不需要进行额外的转换. JSON是JavaScript Object Notation的缩写,使用了我们前面介绍的两种缩略标记. 例如,想要描述一个乐队的话,可以写成: 可以在JavaScript中直接

《众妙之门——JavaScript与jQuery技术精粹》——1.3 JavaScript自带函数(数学、数组以及字符串函数)

1.3 JavaScript自带函数(数学.数组以及字符串函数) 通读了JavaScript的数学.数组和字符串函数后,我意识到它们会让编程变得非常方便,使用它们可避免使用许多循环和条件.例如,当需要找到一组数中的最大数时,需要写这样一个循环: 可以不通过循环而这样实现: 需要注意的是,不能对一个数值数组使用sort()函数,因为它会按照词法排序. 另一个有趣的方法是利用Math.max()函数,返回一列参数中的最大值: Math.max(12,123,3,2,433,4); // return

《众妙之门——JavaScript与jQuery技术精粹》——1.6 允许配置

1.6 允许配置 每当我写完JavaScript源程序并将之公布于众时,人们总是想修改程序,有时是因为人们想进行功能拓展,但大多数时候是因为我的程序太难于定制. 解决方法是在脚本语言中加入配置文件.我在<JavaScript配置对象 >一文中进行了详细的讲述,下面是其中的一些要点. 在整个脚本文件中添加一个对象作为配置文件. 2 .在配置文件中加入使用该脚本程序可能需要改变的所有信息: . CSS的 ID和类名称: . 生成按钮的字符串(比如说标签): . 数据:例如"要展示的图片张