美文网首页
事件代理/事件委托

事件代理/事件委托

作者: 程序猿人王小贱 | 来源:发表于2017-05-04 00:58 被阅读0次

    利用事件冒泡机制,通过设置一个事件处理程序,来管理某一类型的所有事件。(例如:取快递、ul-li操作)

    1. 取快递

    公司员工每天都会有快递,为签售快递,有两种办法:(1) 每位员工在门口等快递员的快递,(2) 委托给前台MM签收快递,然后在分发给每位员工。即使有新的员工入职,也可以为他代签。

    2层含义:

    1. 前台MM是有签收事件 ---- DOM节点是有事件的
    2. 新添加的员工也是可以代签 ---- 新增加的DOM节点也拥有事件

    2. li节点的点击事件

    比如有100个li元素,并且每个li都有相同的click事件,可能我们会for循环遍历所有的li,为每个li添加click事件。

    问题:
      (1) 添加到页面上的事件处理程序将直接影响页面整体运行的性能。因为需要不断的与DOM节点进行交互,访问DOM节点的次数越多,引起浏览器的重绘与重排的次数也越多,就会延长整个页面的交互就绪的事件,这也是性能优化减少DOM操作的方式的原因。

    (2) 为每个li元素添加事件处理程序,每个函数都是一个对象,每个对象都会占用内存,函数越多,占用内存越大,性能就越差。

    事件委托机制,将所有的操作放在JS里面,与DOM的操作就只需要交互一次,大大的减少了DOM操作次数,提高性能。而且只需要对所有li元素的父节点进行一次操作就行,只需要一个内存空间,大大减少了内存的需要。

    =========未完待续========

    相关文章

      网友评论

          本文标题:事件代理/事件委托

          本文链接:https://www.haomeiwen.com/subject/qwfrtxtx.html