`
wyzxzws
  • 浏览: 392415 次
  • 性别: Icon_minigender_1
  • 来自: dazhou
社区版块
存档分类
最新评论

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

DOM 
阅读更多

一个简单而优雅的处理处理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(e){
 // 浏览器 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;
 }
}

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

  • 访问事件对象,并判断事件源。
  • 取消文档树中的冒泡(可选)。
  • 阻止默认动作(可选,但配合需要,因为需要捕获并阻止打开链接)。
分享到:
评论

相关推荐

    JavaScript之事件委托.pdf

    这种方法基于事件冒泡的机制,能够减少对DOM的操作,提高页面性能。 一、什么是事件委托 事件委托,又称事件代理,主要是利用事件冒泡的特性。在DOM树中,当一个元素发生事件时,该事件不仅会在该元素上触发,还会...

    选项卡事件委托demo

    总之,“选项卡事件委托demo”是一个生动的例子,展示了如何利用事件委托来管理TabControl中的交互,提高代码的效率和可维护性。这种技术在现代Web开发中非常常见,对于理解和优化大型项目非常有价值。

    Button添加事件委托问题

    在.NET框架中,按钮控件(Button)是用户界面中非常常见的一种元素,它用于触发某种操作或事件。本文将详细探讨"Button添加事件委托问题...在实际开发中,不断调试和优化这些细节,能够提高应用程序的用户体验和性能。

    【Web API DOM07】事件委托

    然而,如果页面上有大量的动态生成或者相似的元素,每个都绑定事件可能会导致代码冗余且降低页面性能。事件委托是一种策略,它允许我们在一个共同的父元素上绑定事件,而不是在每一个子元素上单独绑定。这样做有两个...

    前端学习笔记,做一个简单的网站-利用事件委托的方法,给一个无序列表的列表项添加点击更改背景色事件,学习代码

    总结来说,事件委托是前端开发中的一种高效技术,它简化了处理大量交互元素的逻辑,降低了代码复杂性,同时也提高了页面性能。通过结合HTML、CSS和JavaScript,我们可以创建一个动态的、响应用户点击的列表,使得每...

    APICloud教程-如何提高移动性能

    - 使用事件委托模式,减少事件监听器的数量。 - 在低端设备上限制CSS3渐变阴影效果的使用,以提高流畅性。 4. **单页面应用优化**: - 单页面应用应考虑延迟加载非首屏业务模块,以加快初次加载速度。 5. **...

    【JavaScript源代码】JavaScript给事件委托批量添加事件监听详细流程.docx

    事件委托是一种非常实用的技术,它不仅可以显著提升页面性能,还能让代码更加简洁和易于维护。通过合理运用事件冒泡机制,我们可以轻松地处理复杂的事件逻辑,并应对动态变化的DOM结构。希望本文能帮助你更好地理解...

    事件绑定、事件监听、事件委托.pdf

    事件委托的优点是明显的:它减少了事件处理器的数量,降低了内存消耗,提高了页面的性能;同时也使得事件处理器的管理更加集中和方便。 总结起来,事件绑定、事件监听和事件委托是现代Web开发中处理用户交互不可或...

    Node.js-ui-event-observer:提供高性能的方式订阅浏览器UI事件

    它可能通过优化事件委托、批量处理事件或者采用其他高级技术来提升性能,确保在处理大量用户交互时,不会导致浏览器性能下降或者阻塞。 标签 "Node.js开发-调试/剖析" 提示我们,这个库不仅涉及Node.js开发,还与...

    javascript事件列表解说

    在实际应用中,我们还可以利用事件委托,通过监听父级元素来处理子元素的事件,以减少内存占用和提高性能。此外,还有一些高级技术,如事件阻止(event.preventDefault())和事件停止传播(event.stopPropagation()...

    jQuery动态追加页面数据以及事件委托详解

    标题和描述中提到的“jQuery动态追加页面数据以及事件委托详解”,涉及的两个主要知识点是:jQuery动态追加页面数据和jQuery事件委托。详细内容包括如何使用jQuery技术向页面动态追加内容,并利用事件委托处理动态...

    JavaScript事件委托实现原理及优点进行

    JavaScript事件委托是一种高效处理大量动态DOM元素事件的技术,它基于事件冒泡机制,将事件监听器添加到父元素而非所有子元素上。...在实际开发中,合理地运用事件委托,可以显著提高应用的性能和可维护性。

    页面开发性能.优化

    3. **事件委托**:通过事件委托机制减少事件监听器的数量,提高页面响应速度。 4. **优化DOM操作**:减少DOM操作,特别是避免频繁修改DOM树结构,因为这会触发浏览器重新布局和重绘。 #### 其他通用性能优化方法 1...

    js代码-js事件委托

    总结来说,JavaScript事件委托是一种高效处理事件的方法,它利用事件冒泡机制,减少了DOM操作,提高了代码可维护性,并适应了动态内容的需求。在编写高性能的前端应用时,熟练掌握和运用事件委托是必不可少的技能。

    javascript性能优化之事件委托实例详解

    综上所述,通过事件委托技术,我们可以有效地减少内存占用,提升页面性能,增强用户交互体验。尽管事件委托非常强大,但在实际应用中也需要注意一些问题,例如正确地识别事件的目标元素、防止事件冒泡的误操作等。...

    JavaScript事件委托原理与用法实例分析

    这种方式有助于减少内存消耗,提高页面性能,并且能够处理动态添加或删除的子元素。 ### 1. 事件流 在理解事件委托之前,我们需要了解JavaScript中的事件流模型: - **冒泡(Bubbling)**:当一个事件在文档层次...

    C#winform委托控制事件

    本文将深入探讨如何利用委托来控制多个窗口同时执行的事件,以及如何避免页面刷新问题,确保应用的高效运行。 首先,我们需要理解什么是委托。在C#中,委托是一种类型,它类似于函数指针,但更安全,可以引用一个或...

    高性能JavaScript.pdf

    - 事件委托(Event Delegation)是一种提高事件处理效率的技术,通过监听父元素上的事件来处理子元素的事件,从而避免为每个子元素单独绑定事件监听器。 #### 四、算法与流程控制(Algorithms and Flow Control) ...

    .NET 性能优化方法总结

    - **4.3.2 使用事件委托**:使用事件委托可以减少事件监听器的数量,提高性能。 **4.4 其他** - **4.4.1 缓存选择结果**:对于频繁使用的DOM元素,可以将其存储在变量中,避免重复查询。 综上所述,.NET性能优化...

Global site tag (gtag.js) - Google Analytics