事件代理那些事

简单说说。

事件代理,顾名思义,就是把本应该是自己的事情来交给别人来帮你做,比如,你要卖房,你不可能一天到晚蹲在马路边见人就问要不要买房吧,这样不仅消耗能量,还效率低,在javascript中也是,如果需要绑定事件的元素多了,你如果为每一个都绑个事件的话,你受的了,浏览器也受不了,搞不好它就崩溃了,你就尴尬了,所以把事件代理到元素的父级上是个好方法。

怎么搞?

要了解它是怎么搞起的,首先要知道背后的秘密,事件代理的秘密很简单,那就是事件冒泡,事件冒泡大家肯定都知道,比如当你单击了一个元素,这个单击事件不会就在这个元素上就结束了,而是会一直沿着它 的父级一直往上传,直到html元素,所以如果某个父级也绑定了单击事件的话,就会同时触发两个事件,这在一般情况下是不好的,因为提倡各行其职嘛,这样这个世界才会和谐的向前发展,所以大多情况下我们都是会去阻止它,在我刚开始学习js的时候,我就很郁闷,事件冒泡这玩意有什么卵用呢,不仅没用还有麻烦,所以我很讨厌,但在我接触了事件代理后,我发现原来它是有作用的,作用还挺大,就这样我就对它黑转粉了。但仅仅这样还不够,你可以把子元素的事件都绑定到父元素上,但在具体发生的时候,你总得知道是发生在哪个子元素上吧,这样才能执行相应的操作,不然父元素不得直接懵逼了。

检测具体是哪个元素,后面再说。

有啥好处?

没有好处的事情谁做呢是不是,这又不是公益,对程序员来说多一事不如少一事,所以事件代理肯定是有好处的,那么好处究竟是什么呢,好吧,其实很简单,不仅减少代码,还给浏览器减负了,浏览器可是我们的大boss啊,没有它我们就失业了,好吧,其实我还没就业,所以善待浏览器就是善待我们自己。其实稍微举个例子就清楚了,如果一个父元素有一千个子元素,这一千个子元素每个都有绑定了事件,那你怎么办,难道为每个元素都来绑一个,我去,直接辞职不干啊,所以这时把它代理到父元素上,一切都完美了,牺牲一个父元素,成全千万子元素,名垂千古,永垂不朽。。。。

代码怎么敲?

说来说去说的再多说的再感人都没什么用,关键还是要用代码敲出来,这样浏览器才懂,不然不是对牛弹琴嘛。俗话说天才第一步,雀氏纸尿裤。那么事件代理第一步就是如何获取事件具体来自哪个子元素,代码奉上:

function getTarget(e){
   var e=e || window.event;
   return e.srcElement || e.target;
}

为什么都有一个||呢?没办法,谁让IE喜欢搞特殊呢,人在屋檐下,总得要低头,我们改变不了那就只能去兼容了,谁让还有人用IE呢,通过这个函数,就可以获取发生事件的目标元素。接下来就是调用它,不然要它有何用。

function dosomething(e) 

{
           var target = getTarget(e);
           if(target.className==‘yourname‘) 

           {
                // do anything  you like
          }
}

调用其实也很简单,关键就是要检测这个目标的与众不同之处,就像我们人一样,每个人都一个独一无二的身份证,通过这个就可以分辨一个人,事件代理也是如此,目标传过来,根据它的与众不同之处来分辨具体是哪个,然后再相应的执行不同的事情就行了。 

凡事都有两面性。

需要创建的以及驻留在内存中的事件处理器少了,这样我们就提高了性能,并降低了崩溃的风险,这样浏览器happy了,我们也开心,用户也高兴,皆大欢喜有木有。 
再者在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的,比如说通过Ajax,你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。

不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。
在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了,因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

总结大会。

总的来说,事件冒泡还是很优秀的,我们要时刻想着它,需要用的时候就用,不要委屈自己,伤身体就不好了。

时间: 2024-08-11 05:45:06

事件代理那些事的相关文章

关于JavaScript中的事件代理

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

javascript事件代理(delegate)原理解析

什么是事件代理?首先得知道什么是事件,并且弄清楚事件流,才能真正明白事件代理原理. 一.什么是事件? javascript与HTML之间交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.如onload.onclick.onmouseup.onmousedown... . 二.事件流 DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流. 因为历

Javascript中的事件委托(事件代理)

之前我们说过用 for 循环绑定事件 没看过的点这里   今天我们介绍一种更加方便的方法,就是事件委托,也叫事件代理: 件事委托是什么 事件委托:简单说就是把一个事件交给别人来完成,就是利用冒泡原理,将事件绑定到节点的父级节点上,触发执行效果. 件事委托的好处 提高Javascript性能.假如现在有个 ul,里面有10个 li,每个 li 都需要触发事件,之前我们说过可以用 for 循环,遍历所有的 li,然后添加事件,这样会影响Javascript性能. 动态绑定事件,可以给暂未存在的元素绑

封装Js事件代理方法

// 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(element.addEventListener){ // 给父元素添加事件 element.addEventListener(event,function(e){ // 获取当前触发的元素 var target = e.target; // 判断当前元素是否是我需要的 if(target.nodeName.

JavaScript事件代理和事件委托

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

Js - 事件代理

事件代理是利用了事件冒泡,制定一个事件处理程序,就可以管理某一类的所有事件.例如,click事件会一直冒泡到document层次(就是不断地向父元素传递至最上层的document).就是说可以为整个页面指定一个onclick事件处理程序,而不必单个元素分别添加处理程序. <ul id="ul1"> <li >item1</li> <li >item2</li> <li >item3</li> </

JavaScript事件代理入门

事件代理(Event Delegation),又称之为事件委托.是 JavaScript 中常用绑定事件的常用技巧. 顾名思义,"事件代理"即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务. 为什么要这样做呢? 众所周知,DOM操作是十分消耗性能的.所以重复的事件绑定简直是性能杀手.而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件. 下面将会用 Zepto 为大家演示怎么实现事件代理. 啊?Zepto是什么? Zepto is a minimalist J

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

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

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

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