相较于js事件委托，jquery事件委托的优势：执行事件委托的时候只有子元素会触发事件函数，而代为执行的父元素不会触发时间函数，因此不用去判断元素节点的名称；
这里nodes节点下所有标签为p的子节点都被赋予事件处理函数；这里的子节点还可以是多个类似' p,span',需要注意这里面也不可以写同nodes一样的标签，否则点击元素之间的间隔会给nodes下的div赋予事件处理函数；如例二：
例一:
let inner = 33;
//这里nodes节点下所有标签为p的子节点都被赋予事件处理函数；这里的子节点还可以是多个类似' p,span',需要注意这里面也不可以写同nodes一样的标签，否则点击元素之间的间隔会给nodes下的div赋予事件处理函数
$('#nodes').on('click','p',function(e){
let target = $(e.target)
target.css('backgroundColor','red')
})
$('button').click(()=>{
inner++;
$('#nodes').append($('<p>我是新增加的p标签'+inner+'</p>'))
})
浏览器运行的效果如图四所示：
例二:
<body>
<div>
<P>第一个p</P>
<P>第二个p</P>
<P>第三个p</P>
<span>span</span>
<div>
<p>这是子集菜单</p>
<div>我是子集的div
<p>我是子集的p</p>
</div>
</div>
</div>
<button>点击加一</button>
</body>
<script>
let inner =33;
$('#nodes').on('click','p,div,span',function(e){
let target = $(e.target)
target.css('backgroundColor','red')
})
$('button').click(()=>{
inner++;
$('#nodes').append($('<p>我是新增加的p标签'+inner+'</p>'))
})
</script>
浏览器运行效果如图五所示：
事件委托不仅仅只是为处理一种dom操作类型，他可以进行增删改查等功能：
js事件委托：不同操作
<body>
<div>
<input type="button" value='增加'>
<input type="button" value='减少'>
</div>
<div>
</div>
</body>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
let events = document.getElementById('events');
let content = document.getElementById('content');
events.onclick=function(e){
let ev = e || window.event;
let target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase()=='input'){
switch(target.id){
case 'addHandle':
return addEvent();
break
case 'deleteHandle':
return deleteEvent();
break
}
}
}
function addEvent(){
let add = document.createElement('p')
add.innerHTML = '这是增加按钮'
content.appendChild(add)
}
function deleteEvent(){
let del = document.createElement('p')
del.innerHTML = '这是删除按钮'
content.appendChild(del)
}
</script>
浏览器中的效果如图六所示：
jquery事件委托：不同操作
$('#events').on('click','input',(e)=>{
let target = $(e.target);
switch(target[0].id){
case 'addHandle':
return addEvent();
break
case 'deleteHandle':
return deleteEvent();
break
}
})
function addEvent(){
$('#content').append($('<div>这是增加按钮</div>'))
}
function deleteEvent(){
$('#content').append($('<div>这是删除按钮</div>'))
}
浏览器中的效果如图七所示：
