事件嘱托-提高页面性能

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

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

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

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

捕获到达目标冒泡

//用事件委托方法来处理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; }}

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