jquery事件委托的方法介紹

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

事件委派是通過on()方法來實現(xiàn)的，下面我們通過代碼進行演示。

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

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

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

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

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

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

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

猜你喜歡

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

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

什么是jQuery對象?

黑馬程序員web前端培訓課程