事件委托

666 词
事件委托(代理、委派)

事件委托#

事件冒泡本身的特性,会带来坏处, 也有好处 ,需灵活掌握。

问题#

eg:一班有100个学生,快递员有100个快递,若一个个送则花费时间较长,同时每位学生领取时,也需要排队领取,也花费较长时间,怎么办?

解决方案:快递员把100个快递, 委托 给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。

事件委托

点击每个li都会弹出对话框,以前需要给每个li循环注册事件,过程繁杂且访问DOM的次数越多,这就会延长整个页面的交互就绪时间。

事件委托#

事件委托也称为事件代理,在jQuery里面称为事件委派。

事件委托原理#

不是每个子节点单独设置事件监听器,而是事件监听设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡到ul上,ul有注册事件,就会触发事件监听器。

事件委托的作用#

减少注册次数,只用操作一次DOM,提高了程序的性能。

实现#

事件对象.target.tagName可以获得真正触发事件的元素

  • 拜拜甜甜圈,珍珠奶茶方便面
  • 拜拜甜甜圈,珍珠奶茶方便面
  • 拜拜甜甜圈,珍珠奶茶方便面
  • 拜拜甜甜圈,珍珠奶茶方便面
  • 拜拜甜甜圈,珍珠奶茶方便面