js事件委托

最新推荐文章于 2024-11-29 21:24:43 发布

原创最新推荐文章于 2024-11-29 21:24:43 发布 · 298 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了事件冒泡原理及事件委托的应用，通过一个具体的示例展示了如何利用事件委托为多个子元素绑定事件监听器，同时实现了新添加子元素也能自动绑定事件的功能。

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

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

为什么要事件代理

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;
        }

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';
    });
}

效果图