事件对象

let main = document.querySelector(".main")
main.onclick = function (e) {
    console.log(e)
}

事件对象的属性

let main = document.querySelector(".main")
main.onclick = function (e) {
    // target 返回对应的dom对象
    console.log(e.target)
}

事件委托

优点

• 性能好
• 后添加的内容也有效

// 实现小功能 点击li让当前li的背景变成红色
<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>
// for循环实现
let lis = document.querySelectorAll("li")
let liLen = lis.length;
for (let i = 0; i < liLen; i++) {
    lis[i].onclick = function (e) {
        this.style.backgroundColor = 'red'
    }
}

// 通过事件委托实现
let ul = document.querySelector("ul")
ul.addEventListener("click", (e) => {
   e.target.style.backgroundColor = 'red'
}, false)

// 使用事件委托只需要给父级添加一个点击事件，不需要给每一个li加入点击事件，性能能得到提升