JS | 事件委托 之“11”漫谈——event delegation

今天讲讲事件委托,以小故事来开篇吧。

眼看双十一就要来了,周围的人寻思估摸着要“剁手,吃土”了,购物车里,那是加了一件又一件。话说马云师兄,咳咳,鄙人不才,同一母校,导开了电商之路后,那快递,可是摞了一叠,叠了再摞,纸山袋海。额,不好意思,接个电话,“喂,您的快递到了,麻烦签收一下”,“好的好的”。快递行业,雄起,快递小哥的工资也是“蹭蹭蹭”往上涨。这说明什么,说明人的购物欲望之强烈,还是十分之强烈。话说回来,快递到了,得要签收吧,有时人不在家,快递小哥辛苦一趟,这可是白做功呀。菜鸟驿站应运而生,而小区有小区快递物流管理,公司有公司前台领取,这就形成了“事件委托”,将个人领取快递的事件,委托给了区域内统收快递的事件。比如说,咱们来说谈谈小区快递吧。

在一个微有冷风吹的日子,在一个高大明亮的小区门口,双十一之后的一周内,来的快递不胜枚举,而小区,安全管理起见,是不允许快递进来滴,不好意思;

假使一:小区无快递代收服务,场景:小区门口。

EMS快递小哥:“喂,您的快递到了,我已经在小区门口了”,“喂,您的……”,“喂,您的……”

而后,顺丰快递小哥也跟着来了,“喂,您的……”,“喂……”,“喂……”;

然后你知道的,小区门口很多快递堆着,很多人挤着,造成交通阻塞。人拿快递相当于函数,是个对象,会占用门口的空间,对象多了,门口的空间小了,拿到自己快递的效率也就低了。紧接着韵达也来了,额……拿快递的人数量太多了,何况赶上双十一呢,直接影响到整体拿快递的运作性能。

小赵.addEventListener('电话', function(){ console.log("拿顺丰快递") });

小钱.addEventListener('电话', function(){ console.log("拿EMS快递") });

小孙.addEventListener('电话', function(){ console.log("拿顺丰快递") });

小李.addEventListener('电话', function(){ console.log("拿EMS快递") });

仁兄可否想象那种场景,快递哥还赶着下一个收货人区域呢,晕了……怎可这般办事,夫子曰:不可取,不可取,此性差也,而耗时矣。

假使二:快递委托小区代收,统放在云柜里,有各自的柜号。快递人放好快递,走了,锵锵锵,行往下个目的地。

小区云柜.addEventListener('短信',小区人物,function(e){

    switch(e.target.id) {

      case "小赵":

        “云柜000取快递”;

        break;

        case "小钱":

          “云柜001取快递”;

          break;

        case "小孙":

          “云柜002取快递”;

          break;

    }

});

中间多了如斯步骤,虽然最终结果是相同的,用户拿到自己的快递,但自从有了事件委托,中间耗的时间少了,路也不堵了,干活活轻松。

那,换言之,用程序员族的方言来讲,每个函数都是对象,会占用内存,而占用的内存(空间)越多,性能也就越差,就像之前的假使一快递,这是其一;其二,指定的事件处理程序的DOM访问次数增加(快递小哥电联每个用户),会延迟页面的交互时间(拿快递耗时)。而事件委托的出现,是为了解决事件处理程序过多(拿快递人太多)的问题。它利用了事件冒泡的机制,为DOM树中尽可能高的层次(小区管理)添加事件处理程序。一般而言,会委托document对象(类似小区管理),一则因为document对象可以很快访问,二则因为document可以作用于页面上呈现的元素。如此,DOM引用少,时间少,占用内存空间少,性能也就跐溜地提升了。

一个比喻,如有想法,请多多指教。

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

推荐阅读更多精彩内容