欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-05-28 21:03:39
...

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

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

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

  1. 捕获
  2. 到达目标
  3. 冒泡
<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

上一篇： 烤鱼怎么做最好吃，快来一起学习学习

下一篇： 吐酒后吃什么好，具体有哪些食物可以吃

推荐阅读