事件委托好处:
1,性能好
2,新添加的元素会动态跟踪事件
js事件委托
window.onload = function(){
var Ul = document.getElementById("ul");
var Li = oUl.getElementsByTagName("li");
/*
event:事件源,在哪个事件中,操作的那个元素就是事件源
ie浏览器:window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
Ul.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.height = "100px";
}
}
Ul.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.height = "200px";
}
}
}
关于更多event事件源,参见:https://blog.csdn.net/lucky541788/article/details/81809283
vue事件委托
<div class="preview" ref="preview" @click="deleteCanvas($event)"></div>
// methods
deleteCanvas (e) {
// 功能:点击删除其对应的子元素
this.$refs.preview.removeChild(e.target)
}
jq事件委托
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
$(function () {
$('button').click(function () {
$('ul').append("<li>我是第0个li</li>");
});
// $('ul>li').click(function () {
// alert($(this).text());
// });
$('ul').delegate('li', 'click', function () {
alert($(this).text());
})
});