事件委托#
事件冒泡本身的特性,会带来坏处, 也有好处 ,需灵活掌握。
问题#
eg:一班有100个学生,快递员有100个快递,若一个个送则花费时间较长,同时每位学生领取时,也需要排队领取,也花费较长时间,怎么办?
解决方案:快递员把100个快递, 委托 给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。
点击每个li都会弹出对话框,以前需要给每个li循环注册事件,过程繁杂且访问DOM的次数越多,这就会延长整个页面的交互就绪时间。
事件委托#
事件委托也称为事件代理,在jQuery里面称为事件委派。
事件委托原理#
不是每个子节点单独设置事件监听器,而是事件监听设置在其父节点上,然后利用冒泡原理影响设置每个子节点。以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡到ul上,ul有注册事件,就会触发事件监听器。
事件委托的作用#
减少注册次数,只用操作一次DOM,提高了程序的性能。
实现#
事件对象.target.tagName可以获得真正触发事件的元素
- 拜拜甜甜圈,珍珠奶茶方便面
- 拜拜甜甜圈,珍珠奶茶方便面
- 拜拜甜甜圈,珍珠奶茶方便面
- 拜拜甜甜圈,珍珠奶茶方便面
- 拜拜甜甜圈,珍珠奶茶方便面