js事件委托

 事件冒泡：子元素身上的事会冒泡到父元素上

 事件委托(事件代理)：把加上子元素身上的事件，加在父元素身上，本质是事件冒泡

 为什么要事件代理

       1.提高性能，节约内存

       2.新添加的子元素也可以绑定上事件

区分事件本应该是哪个子元素：event对象里记录的有“事件源”，它就是发生事件的子元素。

它存在兼容性问题，在老的IE下，事件源是 window.event.srcElement，其他浏览器是 event.target。

mouseover  鼠标移入   mouseout  鼠标移出

用事件委托的方式，onmouseover、onmouseout方法加在ul身上了，并新创li标签，再通过找事件源的方式，改变对应li背景

html

 <ul>
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
 </ul>
 <button>创建一个li</button>

​

css

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-bottom: 50px;
        }

        li {
            background-color: red;
        }

js

let ul = document.querySelector('ul');
let btn = document.querySelector('button');
let num = 4;
onload = function () {
    //点击按钮新创一个li
    btn.addEventListener('click', function () {
        num++;
        //创建li
        let li = document.createElement('li');
        li.innerHTML = `第${num}个li`;
        ul.appendChild(li);
    });

    //鼠标移入变色
    ul.addEventListener('mouseover', function (e) {
        console.log(e.target.className);
        console.log(e);
        let ele = e || window.event;
        let u_li = ele.srcElement || ele.target;
        u_li.style.backgroundColor = 'yellow';
    });

    //鼠标移出正常
    ul.addEventListener('mouseout', function (e) {
        // console.log(e);
        let ele = e || window.event;
        let u_li = ele.srcElement || ele.target;
        u_li.style.backgroundColor = 'red';
    });
}

效果图