js中通用的事件绑定函数

最新推荐文章于 2023-10-15 15:21:59 发布

史学娇

最新推荐文章于 2023-10-15 15:21:59 发布

阅读量274

点赞数

分类专栏：面试题文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46151381/article/details/128716226

版权

面试题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该文章介绍了一个名为bindEvent的自定义函数，用于处理事件绑定。函数支持普通绑定和事件代理，通过判断传入的选择器来决定执行方式。在示例中，它分别被用来绑定按钮的点击事件和在div内a标签的点击事件，展示了阻止默认行为并弹出相关元素内容的功能。

摘要由CSDN通过智能技术生成

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', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})