jQuery事件委托原理

事件委托其实是利用的事件冒泡的机制来实现的
原理：把事件加在父元素上，在父元素里判断事件源（目标元素）是否为你想要触发的元素标签，如果是才触发，不是不触发
事件冒泡：子元素事件触发后，会依次调用父级元素的同名事件，直到window，事件冒泡默认就存在

  // // 找到ul
        // var ul = document.getElementsByTagName('ul')[0];
        // // 添加新的li
        // document.getElementById('btn1').onclick = function(){

        //     var li = document.createElement('li');
        //     li.innerHTML = "我是新的li";
        //     ul.appendChild(li);
        // }

        //  var list = document.getElementsByTagName('li');
        //  for(var i = 0; i < list.length; i++){

        //      list[i].onclick = function(){

        //          alert('被点了');
        //      }
        //  }

        // 如果我希望后面创建的li也有点击事件，就加到ul身上（因为所有li被点，都会事件冒泡都会冒泡到ul上）
        // 可是我只是想给li加点击事件，你现在直接给ul加点击事件，相当于ul里所有的元素都有点击事件
        // 如何保证我只让li有点击事件？
        // ul.onclick = function(e){

        //     e = e || window.event;
            
        //     // console.log(e.target);// 获取事件源（目标元素）
        //     // 我只要判断事件源是否为li，就行了，只有li才执行代码就行了
        //     // console.log(e.target.nodeName); //nodeName节点名，如果是标签会得到标签名（大写）

        //     if(e.target.nodeName == 'LI'){

        //         alert('被点击了');
        //     }
            
            
        // }


        // $('li').click(function(){

        //     alert('被点了');
        // })

        // 把事件加在ul身上，用事件委托
        // 事件委托：可以让后面新加的元素也有事件
        $('ul').on('click','li',function(){

            alert('被点了');
        })

        // $('#btn1').click(function(){

        //     // 创建新的li添加到ul里
        //     $('<li>我是新的li</li>').appendTo( $('ul') );
        // });

事件冒泡：默认就存在，指的是子元素的事件触发后，会依次调用父元素的同名事件
trigger(‘事件名’)
用代码调用某个事件

  $('.box').click(function () {

            alert('div被点了');
        });

        // 现在我想点击按钮，触发按钮的事件外，还想触发div的点击事件
        $('#btn1').click(function () {

            alert('按钮被点了');
            // trigger
            // 代码调用box的点击事件（模拟有人点了div）
            $('.box').trigger('click');
        });