事件委托---提高页面性能

wyzxzws

浏览: 391813 次
性别:
来自: dazhou

最近访客更多访客>>

zjut_wyj

cooperay

wh1978

bety

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

转载文章

DOM

一个简单而优雅的处理处理DOM事件的技术是事件委托。它是基于这样一个事实：

事件逐层冒泡并能被父级元素捕获。使用事件代理，只需给外层元素绑定一个处理器，就可以处理在其子元素上触发的所有事件。

根据DOM标准，每个事件都要经历三个阶段：

捕获
到达目标
冒泡

<body>
    <div>
        <ul id="menu">
            <li><a href="menu1.html">menu1</a></li>
            <li><a href="menu2.html">menu2</a></li>
            <li><a href="menu3.html">menu3</a></li>
            <li><a href="menu4.html">menu4</a></li>
        </ul>
    </div>
</body>

//用事件委托方法来处理UL“menu”元素添加一个点击监听器，它会捕获并分析点击是否来自链接。
document.getElementById("menu").onclick = function(ｅ){
 // 浏览器 target
 e = e || window.event;
 var target = e.target || e.arcElement;

 var pageid, hrefparts;
 // 只关心hrefs,非链接点击则退出
 if(target.nodeName !== "A"){
  return;
 }

 // 从链接中找出页面页面ID
 hrefparts = target.href.split("/");
 pageid = hrefparts[hrefparts.lenght - 1];
 pageid  = pageid .replace(".html", "");
 
 // 更新页面
 ajaxRequest("xhr.php:page="+pageid, updatePageContents);
 
 // 浏览器组默认行为并取消冒泡
 if(typeof e.preventDefault === "function"){
  e.preventDefault();
  e.stopPropagation();
 } else {
  e.returnValue = false;
  e.cancelBubble = true;
 }
}

跨浏览器兼容的部分包括：

访问事件对象，并判断事件源。
取消文档树中的冒泡（可选）。
阻止默认动作（可选，但配合需要，因为需要捕获并阻止打开链接）。

分享到：

查找表---提高性能 | 批量修改DOM

2011-11-22 09:23
浏览 985
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

事件委托---提高页面性能

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

事件委托---提高页面性能

评论

发表评论

相关推荐

charles抓不到包问题

vim 系统剪贴板负责粘贴

MAC man命令的中文帮助文档

nginx配置mac-403

配色理论

html页面调用安卓应用

汉字转拼音处理

acdsee15破解方法

mac解压缩命令大全

分享集合js

基于PhoneGap的webOS平台入门教程

基于PhoneGap的iOS&Android平台入门教程

window.open浏览器兼容问题

Tomcat域名或IP地址访问方式配置方法

百度地图api参考

div+css居中实践

你应该知道的CSS文字大小单位PX、EM、PT ---转载

不用图片和JS，照样创建绚丽的动态CSS3菜单---转载

淘宝前端工程师：国内前端行业十日谈(转载)

eclipse编码统一设置

最近访客更多访客>>