事件

事件

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 来判断是否触发元素