js事件委托 jQuery写法

http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的，这篇文章写的细

这是js 事件委托写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件获取目标元素</title>
    <style>
        li{width: 499px;height: 50px;border: 1px solid #000;}
        ul{height: 300px;}
    </style>
</head>
<body>
    <ul id="ul1">
        <li>a</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script>
    var lis = document.getElementsByTagName("li");
    var ul1 = document.getElementById("ul1");
    ul1.onclick = function(e){
        var events = e || event;
        var target = e.target || e.srcElement;
        console.log(events.target.nodeName)
    }
</script>
</html>

下面是jQuery 写法：(用on)

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>事件获取目标元素</title>
     <style>
         li{width: 499px;height: 50px;border: 1px solid #000;}
         ul{height: 300px;}
     </style>
 </head>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <body>
     <ul id="ul1">
         <li>a</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
     </ul>
 </body>
 <script>
     // var lis = document.getElementsByTagName("li");
     // var ul1 = document.getElementById("ul1");
     // ul1.onclick = function(e){
     //     var events = e || event;
     //     var target = e.target || e.srcElement;
     //     console.log(events.target.nodeName)
     // }
     $('#ul1').on('click','li',function(){
         $(this).css('background','red')
     })
 </script>
 </html>