现在的位置: 首页 > web前端 > 正文

javascript的7个技巧 3

2019年03月05日 web前端 ⁄ 共 2204字 ⁄ 字号 评论关闭

事件委派

秒速赛车公式 www.l19l7.cn Web应用都是由事件驱动运转的。我喜欢事件处理,尤其喜欢自己定义事件。它能使你的产品可扩展,而不用改动核心代码。有一个很大的问题(也可以说是功能强大的表现),是关于页面上事件的移除问题。你可以对某个元素安装一个事件监听器,事件监听器就开始运转工作。但页面上没有任何指示说明这有个监听器。因为这种不可表现的问题(这尤其让一些新手头疼),以及像IE6这样的”浏览器“在太多的使用事件监听时会出现各种的内存问题,你不得不承认尽量少使用事件编程是个明智的做法。

于是 事件委托 就出现了。

当页面上某个元素上的事件触发时,而在 DOM继承关系上,这个元素的所有子元素也能接收到这个事件,这时你可以使用一个在父元素上的事件处理器来处理,而不是使用一堆的各个子元素上的事件监听器来处理。究竟是什么意思?这样说吧,页面上有很多超链接,你不想直接使用这些链接,想通过一个函数来调用这个链接,HTML代码是这样的:

常见的做法是通过循环这些链接,将每个链接上附加一个事件处理器:

·········10········20········30········40········50········60········
01.//典型的事件处理例子
02.(function(){
03.var?resources=
document.getElementByIdx_x(
'resources');
04.var?links=
resources.getElementsByTagName_r(
'a');
05.var?all=
links.length;
06.for(var?i=0;i
07.//Attach
a listener to each link
08.links[i].addEventListener('click',handler,false);
09.};
10.function?handler(e){
11.var?x=
e.target;?
//Get
the link that was clicked
12.alert(x);
13.e.preventDefault();
14.};
15.})();

我们用一个事件处理器也能完成这项任务:

·········10········20········30········40········50········60········
01.(function(){
02.var?resources=
document.getElementByIdx_x(
'resources');
03.resources.addEventListener('click',handler,false);
04.function?handler(e){
05.var?x=
e.target;?
//get
the link tha
06.if(x.nodeName.toLowerCase()===?'a'){
07.alert('Eventdelegation:'?+x);
08.e.preventDefault();
09.}
10.};
11.})();

因为点击事件就发生在这些页面元素里,你要做的就是比较它们的 nodeName,找出应该回应这个事件的那个元素。

免责声明:上面说的这两个关于事件的例子,在所有浏览器里都能运行,除了IE6,在IE6上你需要使用一个事件模型,而不是简单的W3C的标准实现。这也就是我们推荐使用一些工具包的原因。

这种方法的好处并不是仅限于把多个事件处理器缩减为一个。你想想,举个例子,你需要动态的往这个链接表里追加更多的链接。使用事件委托后,你就不需要做其它修改了;否则的话,你需要重新循环这个链接表,重新给每个链接安装事件处理器。



抱歉!评论已关闭.

  • 一以贯之推进党的建设新的伟大工程 2019-03-19
  • 回复@真理论者:你天天在强坛攻击爱因斯坦是不是劳动?创造价值么?负价值也! 2019-03-19
  • 北京天安门广场更换花卉 2019-03-18
  • 党的自我革命是伟大社会革命的强大动力(深入学习贯彻习近平新时代中国特色社会主义思想) 2019-03-18
  • 人民日报人民时评:让安全生产理念成为基本共识 2019-03-18
  • “人民体育 健康中国”马拉松系列赛北京站 2019-03-17
  • 识破“假大学”并没那么难 2019-03-17
  • 佛山:用公积金买装配式住房 贷款额度或可上浮20% ——凤凰网房产北京 2019-03-17
  • 奥运冠军寄语Running Together国际迷你马拉松—在线播放—《奥运冠军寄语Running Together国际迷你马拉松》—体育—优酷网,视频高清在线观看 2019-03-17
  • 【理上网来喜迎十九大】西班牙学者:大国外交令中国成为建立世界新秩序的中流砥柱 2019-03-16
  • 马上背!十九大报告中的四个“新” 2019-03-16
  • 呼市赛罕区南门外小学开展庆父亲节亲子趣味足球赛 2019-03-16
  • 2017大皖客户端徽派栏目全面回顾宣传片 2019-03-15
  • 回复@海之宁:你想自主劳动?全民所有的生产资料凭啥让你自主? 2019-03-15
  • 重庆市南岸区:探索建立“微益坊” 2019-03-15
  • 446| 262| 134| 603| 923| 441| 107| 655| 14| 504|