浅谈javascript事件委托

简介:
+关注继续查看

讲解之前先来讲讲性能.

如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.

首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差.

其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.

一、事件委托

对事件处理程序过多的问题解决的方案就是事件委托技术.

事件委托技术利用了事件冒泡.只需指定一个事件处理程序.

我们可以为某个需要触发事件的父元素来绑定事件处理程序.

HTML代码

<div id="aa">aa</div>
    <div id="bb">bb</div>
    <div id="cc">cc</div>
    <div id="dd">dd</div>

现在的情况下 我们用dom获取当前的元素 那么要写四次 这样就会影响性能

使用事件委托,数个事件处理函数可以使用一个函数来管理。所有的单击事件被委托给一个合适的函数来处理。

采用事件委托方法如下:

 


  1. <script>  
  2.         document.onclick = function(event){  
  3.             event = event || window.event;  
  4.             var target = event.target || event.srcElement;//srcElement 针对IE  
  5.             switch(target.id){  
  6.                 case "aa" :   
  7.                 aa();  
  8.                 break;  
  9.                 case "bb" :   
  10.                 bb();  
  11.                 break;  
  12.                 case "cc" :   
  13.                 cc();  
  14.                 break;  
  15.                 case "dd" :   
  16.                 dd();  
  17.                 break;  
  18.             }     
  19.         }  
  20.           
  21.         function aa(){  
  22.             alert("aa");      
  23.         }  
  24.         function bb(){  
  25.             alert("bb");      
  26.         }  
  27.         function cc(){  
  28.             alert("cc");      
  29.         }  
  30.         function dd(){  
  31.             alert("dd");      
  32.         }  
  33.     </script>  
  34.      









本文转自 涂根华 51CTO博客,原文链接:http://blog.51cto.com/tugenhua/743120,如需转载请自行联系原作者
目录
相关文章
|
9天前
|
JavaScript 前端开发 C++
JavaScript事件委托与事件流+牛客例题
JavaScript事件委托与事件流+牛客例题
10 0
|
2月前
|
JavaScript 前端开发 开发者
JavaScript DOM 事件委托 ★
JavaScript DOM 事件委托 ★
50 0
|
4月前
|
前端开发 JavaScript 开发者
前端祖传三件套JavaScript的DOM之事件的事件委托
在前端开发中,事件处理是非常重要的一部分。JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件,并且事件委托是其中不可或缺的一部分。本文将介绍 JavaScript 中的事件委托。
59 1
|
5月前
|
JavaScript
|
12月前
|
JavaScript 前端开发 索引
手撕前端面试题(Javascript~事件委托、数组去重、合法的URL、快速排序、js中哪些操作会造成内存泄漏......
手撕前端面试题(Javascript~事件委托、数组去重、合法的URL、快速排序、js中哪些操作会造成内存泄漏......
手撕前端面试题(Javascript~事件委托、数组去重、合法的URL、快速排序、js中哪些操作会造成内存泄漏......
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记三十六】事件委托
#yyds干货盘点# 【js学习笔记三十六】事件委托
63 0
#yyds干货盘点# 【js学习笔记三十六】事件委托
|
JavaScript 前端开发
中高级前端应该必会,js实现事件委托代理、切换样式、元素获取相对于文档位置等
1、介绍   随着组件开发大流行,现在三大框架已经基本占领了整个前端。   这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合。   这个时候,你就需要来增加你 js 的功底。
1420 0
|
JavaScript 前端开发
Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件。自测各方面都挺好的,美滋滋的给了研发。研发也美滋滋的开始开发。 但是,好景不长。
1157 0
相关产品
云迁移中心
推荐文章
更多