简述JS中的event delegate

在javasript中delegate这个词经常出现,看字面的意思,代理、委托。

什么是delegate?我们为什么要使用delegate?

它究竟在什么样的情况下使用?它的原理又是什么?

这次就针对javascript delegate的用法和原理进行介绍。


什么是事件委托:

事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown……)的函数委托到另一个元素

一般会把事件委托到它的父层或者更外层DOM树中较高的元素节点,真正绑定事件的是父元素或外层元素而不是其本身

当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数

一个网上流传的例子:

有三个同事预计会在周一收到快递。为签收快递,有两种办法:

一是三个人在公司门口等快递

二是委托给前台MM代为签收。

现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。


为什么要用事件委托:

事件委托减少了dom操作,提高性能

在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;


事件委托的原理:

事件委托的实践是利用事件冒泡的机制来实现的


事件委托怎么实现?

我们对li元素进行操作时,不用事件委托时,一般通过dom操作获取需要的操作的li节点,如果我们要对每个li都进行相同的操作,需要通过getElementById方法获取每一个li对其编写执行语句。或者通过for循环

这中写法会对每一个li节点进行dom操作,如果里面li有动态的增减需求,li变多会影响整体运行性能 

采用事件委托的写法

直接给li的父元素ul列表注册点击事件,通过event对象对ul中的元素进行监控,当ul中有li被点击时,由于事件冒泡,同时也会触发ul上注册的点击事件,上面函数中的e.currentTarget指的是注册事件的ul元素,e.target指的是被点击的元素。这样只需给父元素进行dom操作注册相应事件就能操作其中包含的所有元素。


什么是事件冒泡?

事件冒泡(dubbed bubbling):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从所点击的dom节点开始由内到外进行事件传播,即点击了子元素,如果父元素注册了对应的事件的话,在子元素触发后会接着触发父元素绑定的事件。

Demo

在点击子元素时,同时也是点击了整个页面,如果页面中子元素的父级元素也绑定有点击事件,就会逐级从子元素到祖先元素依次触发。


参考文献:

(转)陈鑫伟的博客

(转)tony1223


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容