js、jq、vue中的事件委托

1、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);
　　　　}
　　}
}

2、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>');
});

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