事件
1. 事件绑定
const btn = document.getElementById('btn1')
btn.addEventListener('click', event => {
console.log('clicked')
})
2. 普通的事件绑定函数
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
// console.log(event.target) // 获取触发的元素
event.preventDefault() // 阻止默认行为
alert(this.innerHTML)
})
3. 事件冒泡
阻止事件冒泡
event.stopPropagation()
4. 事件代理
将事件挂在到父元素上，通过判断是不是点击了某个元素，而去触发事件
- 代码简洁
- 减少浏览器内存占用
- 不要滥用
5. 通用的事件绑定函数
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, event => {
const target = event.target
if (selector) {
// 代理绑定
if (target.matches(selector)) {
fn.call(target, event)
}
} else {
// 普通绑定
fn.call(target, event)
}
})
}
// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', event => {
// console.log(event.target) // 获取触发的元素
event.preventDefault() // 阻止默认行为
alert(btn1.innerHTML)
})
// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', event => {
event.preventDefault()
alert(event.target.innerHTML)
})
6. 无限下拉列表如何监听每个图片的点击
- 事件代理
- 用
e.target获取触发元素 - 用
matches来判断是否触发元素
