jquery事件委托的方法介绍

事件委派是指把原本要给子元素绑定的事件绑定到父元素上，这就表示把子元素的事件委派给父元素。由于事件有冒泡机制，当一个元素触发事件时，可以区分发生事件的是父元素还是子元素。

事件委派是通过on()方法来实现的，下面我们通过代码进行演示。

<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
</ul>
<script>
    $("ul").on("click", "li:first-child", function(){
        alert("单击了li");		//单击第1个li会触发此事件
    });
</script>

上述代码中，click事件是绑定在父元素ul上的，但触发事件的是第1个li子元素，当子元素触发事件后，就会通讨事件冒泡执行父元素ul的事件处理程序了。

需要注意的是，在事件委派的情况下，事件处理函数中的this表示触发事件的元素，即上述代码中的第1个li亓素并不是委派事件的ul元素。

事件委派的优势在于，可以为未来动态创建的元素绑定事件。其原理是将事件委派给父元素后，在父元素中动态创建的子元素也会拥有事件。示例代码如下。

<ul>
    <li>我是原有的li</li>
</ul>

<script>
    $("ul").on("click","li", function(){
		alert(“单击了li");
    });
    var li =$("<li>我是后来创建的li</li>");
    $("ul").append(li);
</script>

上述代码中，第5～7行代码通过事件委派的方式为ul中的li元素绑定了单击事件，在执行第8~9行代码添加li元素后，新添加的li元素也可以触发单击事件。

猜你喜欢

jQuery和vue的区别是什么?

什么是jQuery选择器？jQuery选择器有什么优势？

什么是jQuery对象?

黑马程序员web前端培训课程