jQuery.事件委托
事件委托
事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。
$(el).on( events [, selector ] [, data ], handler(eventObject) )
el是父元素，selector是子元素，事件处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li id="a">油条</li>
<li id="b">包子</li>
<li id="c">米饺</li>
<li id="d">鱼粉</li>
</ul>
</div>
<p id="notes">单击列表项，或光标移到列表项</p>
<script>
$('ul').on('click mouseover', ':not(#four)',
{status: 'important'},
function (e) {
listItem = '列表项' + e.target.textContent + '<br/>';
itemStatus = '状态' + e.data.status + '<br/>';
eventType = '事件' + e.type;
$('#notes').html(listItem + itemStatus + eventType);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li id="a">脚后跟</li>
<li id="b">反对</li>
<li id="c">发的</li>
<li id="d">广泛的</li>
</ul>
</div>
<p id="notes">单机列表项，或光标移到列表项</p>
<script>
$('ul').on('click mouseover', ':not(#four)',
function (e) {
listItem = '列事项' + e.target.textContent + '<br/>';
eventType = '事件' + e.type;
$('#notes').html(listItem + eventType);
});
</script>
</body>
</html>
