利用事件代理提高效率

例如有大于1000个li 在上面做点击事件,如果挨个遍历的话效率会很差 可以利用事件代理,在ul上绑定事件 提高效率

<ul id="uid">
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
        <li id="li5">5</li>
        <li id="li6">6</li>
        <li id="li7">7</li>
        <li id="li8">8</li>
        <li id="li9">9</li>
        <li id="li10">10</li>

    ...
    </ul>

js代码大概张这样

var uid = document.getElementById("uid");
uid.onclick = function(e){
	e = e || window.event;
	var target = e.target || e.srcElement;
	if(target.tagName.toLowerCase() === ‘li‘){
		alert(target.innerHTML);
	}
}
时间: 2024-12-11 20:05:43

利用事件代理提高效率的相关文章

js事件代理(事件委托)最简单的理解

1事件代理:当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 例如:点击按钮删除对应的条目. 如果给每一个按钮添加事件,极为繁琐,这时候需要用到事件代理. 事件代理是基于浏览器的事件冒泡机制. 下面是对应的代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <

JavaScript事件代理,减少开销提高效率

JavaScript事件代理(事件委托),即把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务. 众所周知,DOM操作是十分消耗性能的.所以重复的事件绑定简直是性能杀手.而事件代理的核心思想,就是通过尽量少的绑 定,去监听尽量多的事件. 事件代理的核心思想:事件冒泡 .on( events [, selector ] [, data ], handler ) .delegate( selector, eventType, handler ) 从jQuery 1.7开始,on()函数提供

Delphi的基于接口(IInterface)的多播监听器模式(观察者模式 ),利用RTTI实现Delphi的多播事件代理研究

Delphi的基于接口(IInterface)的多播监听器模式(观察者模式 )http://www.cnblogs.com/hezihang/p/6083555.html 利用RTTI实现Delphi的多播事件代理研究http://www.cnblogs.com/hezihang/p/3299481.html

关于JavaScript中的事件代理

今天面试某家公司Web前端开发岗位,前面的问题回答的都还算凑活,并且又问了一下昨天面试时做的一道数组去重问题的解题思路(关于数组去重问题,可以观赏我前几天写的:http://www.cnblogs.com/craftsman-gao/p/4766223.html.幸好前几天专门看过这个问题,答题时才能轻松应对啊),因为这些以前都有过研究,所以回答起来并没有太大困难.然而,最后面试官又出了一道代码题让我涨姿势了.题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标

JavaScript中事件委托(事件代理)详解

在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 事

JavaScript事件代理和事件委托

一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台

事件代理那些事

简单说说. 事件代理,顾名思义,就是把本应该是自己的事情来交给别人来帮你做,比如,你要卖房,你不可能一天到晚蹲在马路边见人就问要不要买房吧,这样不仅消耗能量,还效率低,在javascript中也是,如果需要绑定事件的元素多了,你如果为每一个都绑个事件的话,你受的了,浏览器也受不了,搞不好它就崩溃了,你就尴尬了,所以把事件代理到元素的父级上是个好方法. 怎么搞? 要了解它是怎么搞起的,首先要知道背后的秘密,事件代理的秘密很简单,那就是事件冒泡,事件冒泡大家肯定都知道,比如当你单击了一个元素,这个单

[转载]JS事件委托(事件代理)的原理以及优缺点

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处呢:1,提高性能. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb&l

js中的事件委托或是事件代理详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了