封装一个通用的事件绑定函数-蒲公英云

封装一个通用的事件绑定函数

小灰灰 2022-12-18 06:54 263阅读 0赞

通过上节案例来展开
案例
需要点击每个a，来。弹出他们的内容

<div id="div3">
    <a href="#">a1</a><br>
    <a href="#">a2</a><br>
    <a href="#">a3</a><br>
    <a href="#">a4</a><br>
    <button id='btn1'>加载更多...</button>
</div>
// 封装通用的事件绑定函数
function bindEvent(elem, type, fn) { 
    elem.addEventListener(type, fn)
}
//获取父元素
const fu = document.getElementById('div3')
bindEvent(fu, 'click', function (event) { 
    // console.log(event.target) // 获取触发的元素
    let target=event.target
    event.preventDefault() // 阻止默认行为
    //过滤符合条件的子元素，主要是过滤掉 加载更多 
    if(target.nodeName.toLowerCase()==="A"){ 
        alert(target.innerHTML;
    }
})

在这里插入图片描述

以上事件绑定函数bindEvent过与简单，我们需要进一步封装，减少使用时的代码：

// 通用的事件绑定函数 
// function bindEvent(elem, type, fn) { 
// elem.addEventListener(type, fn)
// }
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)) { 
               /* let result = element.matches(selectorString); result 的值为 true 或 false. selectorString 是个css选择器字符串. */
                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)
})