首页技术文章正文

jquery事件委托的方法介绍

更新时间:2021-11-11 来源:黑马程序员 浏览量:

IT培训班

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

事件委派是通过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前端培训课程

分享到:
在线咨询 我要报名
和我们在线交谈!