jquery 冒泡和捕获

李令萍 2周前 14浏览 0评论

jQuery是一种流行的JavaScript库,用于简化HTML文档的遍历、操作、事件处理以及Ajax交互等操作。其中,事件处理是jQuery的重要特性之一。jQuery提供了两种事件处理模型,即冒泡和捕获。

冒泡事件是指当一个元素绑定了事件后,若该元素内还有子元素也绑定了相同的事件,则先执行子元素的事件再执行父元素的事件。代码示例如下:

    $(document).ready(function(){
        $(".parent").click(function(){
            console.log("Parent clicked");
        });
        $(".child").click(function(){
            console.log("Child clicked");
        });
    });

上述代码中,当点击Child元素时,先执行Child的事件处理函数console.log("Child clicked"),然后继续冒泡到Parent元素,执行Parent的事件处理函数console.log("Parent clicked")。

捕获事件则是相反的顺序,即当一个元素被点击时,先执行其祖先元素的事件处理函数,再执行该元素自身的事件处理函数。代码示例如下:

    $(document).ready(function(){
        $(".parent").click(function(){
            console.log("Parent clicked");
        }, true);
        $(".child").click(function(){
            console.log("Child clicked");
        }, true);
    });

上述代码中,当点击Child元素时,先执行Parent元素的事件处理函数console.log("Parent clicked"),然后再执行Child的事件处理函数console.log("Child clicked")。

在jQuery中,事件默认为冒泡事件,若要使用捕获事件,则需要在事件处理函数后添加一个参数true。

综上,jQuery事件处理模型中的冒泡和捕获对于dom元素事件的处理非常重要,具有很高的实用性。