js、jq、vue中的事件委託

一、js中的事件委託
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　 alert(target.innerHTML);
　　　　}
　　}
}

二、jq中的事件委託（用on()給父級綁定委託事件 找到對應的子節點）

<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
</ul>

$('ul').on('click','li',function(){ //給li的父標籤綁定委託事件
alert($(this).text());//點擊時候彈出JQ獲取li裏文本內容的
//alert(this.innerHTML);//JS裏獲取裏文本內容的方法
console.log(this);
});
// $('ul').off('click','li');
$('input').bind('click',function(){
$('li:first').before('<li>冬</li>');
});

三、vue中的事件委託（在子元素上面 加上 :data-index）
eg：
<ul class="...">
<li class="..." v-for="(el,index) in getData" :key="index" @click="initData()" :data-index="index">
........
</li>
<ul>