事件委托
事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。
$(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>