浅谈事件委托(事件代理)和事件冒泡

    xiaoxiao2021-03-25  120

    事件冒泡:子级元素的某个事件被触发,它的上级元素的该事件也被递归触发。

    事件委托:使用了事件冒泡的原理,从触发某事件的元素开始,递归地向上级元素传播事件。

    事件委托的优点:

    1) 对于要大量处理的元素,不必为每个元素都绑定事件,只需要在它们的父元素上绑定一次即可,提高性能。

    2) 可以处理动态插入DOM中的元素,对动态插入DOM中的元素进行直接绑定是不行的。

    关于事件委托有一个问题:事件委托给父元素后,如何得知事件是哪个子元素触发的?

    答:可以通过event.target对象来获取。

    <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <div class="button-group"> <button type="button" class="btn" id="btn1">提交</button> <button type="button" class="btn" id="btn2">提交</button> <button type="button" class="btn" id="btn3">提交</button> </div> <script src = "js/jquery-1.8.2.min.js"></script> <script> $(".button-group").on('click', function(e) { event.srcElement ? alert(event.srcElement.id) : alert(event.targete.target.id); }); </script> </body> </html>

    事件代理的应用实例请见:http://blog.csdn.net/zhouziyu2011/article/details/70198984

    jQuery为事件委托提供了bind()、live()、delegate()、on()、off()、one()方法。

    对这些方法的介绍详见:http://blog.csdn.net/zhouziyu2011/article/details/53945994

    转载请注明原文地址: https://ju.6miu.com/read-9413.html

    最新回复(0)