事件委派是指把原本要給子元素綁定的事件綁定到父元素上，這就表示把子元素的事件委派給父元素。由于事件有冒泡機(jī)制，當(dāng)一個(gè)元素觸發(fā)事件時(shí)，可以區(qū)分發(fā)生事件的是父元素還是子元素。

事件委派是通過(guò)on()方法來(lái)實(shí)現(xiàn)的，下面我們通過(guò)代碼進(jìn)行演示。

<ul>
    <li>我是第1個(gè)li</li>
    <li>我是第2個(gè)li</li>
</ul>
<script>
    $("ul").on("click", "li:first-child", function(){
        alert("單擊了li");		//單擊第1個(gè)li會(huì)觸發(fā)此事件
    });
</script>

上述代碼中，click事件是綁定在父元素ul上的，但觸發(fā)事件的是第1個(gè)li子元素，當(dāng)子元素觸發(fā)事件后，就會(huì)通討事件冒泡執(zhí)行父元素ul的事件處理程序了。

需要注意的是，在事件委派的情況下，事件處理函數(shù)中的this表示觸發(fā)事件的元素，即上述代碼中的第1個(gè)li亓素并不是委派事件的ul元素。

事件委派的優(yōu)勢(shì)在于，可以為未來(lái)動(dòng)態(tài)創(chuàng)建的元素綁定事件。其原理是將事件委派給父元素后，在父元素中動(dòng)態(tài)創(chuàng)建的子元素也會(huì)擁有事件。示例代碼如下。

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

<script>
    $("ul").on("click","li", function(){
		alert(“單擊了li");
    });
    var li =$("<li>我是后來(lái)創(chuàng)建的li</li>");
    $("ul").append(li);
</script>

上述代碼中，第5～7行代碼通過(guò)事件委派的方式為ul中的li元素綁定了單擊事件，在執(zhí)行第8~9行代碼添加li元素后，新添加的li元素也可以觸發(fā)單擊事件。

猜你喜歡

jQuery和vue的區(qū)別是什么?

什么是jQuery選擇器？jQuery選擇器有什么優(yōu)勢(shì)？

什么是jQuery對(duì)象?

黑馬程序員web前端培訓(xùn)課程