事件嘱托-提高页面性能 _Web前端

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

一个简单而优雅的处理处理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;
 }
}

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

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