概念
1、如果为父容器绑定事件,那么所有的子元素默认情况下都能触发这个事件,不管这个子元素是 已存在,还是将来创建的
2、这里是利用事件冒泡的原理,为父容器绑定事件,将来所有子元素都会事件冒泡给这个父容器
3、这种将事件绑定给父容器的做法让子元素也能响应事件--就叫做事件委托
参数.target --- 使用
box.addEventListener('click', function (e) {
// e.target:获取当前真正触发事件的对象,说白了,当前用户操作那个元素,e.target就是这个元素
// console.log(e.target.classList.contains('son'))
// 我们如何判断当前元素是我们需要的元素呢?
// 1.我们会为元素添加标识,例如为元素添加一个自定义的类样式
// 2.判断当前元素是否拥有指定的标识,如果有就是我们想要的元素
if ((e.target.className = 'son')) {
//判断如果点击了son这个盒子,则输出单击了son
console.log('单击了son')
} else if (e.target.classList.contains('sister')) {
//判断如果点击了son这个盒子,则输出单击了sister
console.log('单击了sister')
} else if (e.target.classList.contains('other')) {
//判断如果点击了son这个盒子,则输出单击了other
console.log('单击了other')
}
})