web前端面试题汇总Web前端开发Web前端之路

手写通用的事件监听函数

2020-05-25  本文已影响0人  loushumei

前言

在问题前,需要先理解事件冒泡、事件代理

可参考文章【事件代理】 动态数据列表里,如何监听每条数据的点击?

具体实现如下:

DOM节点:

<div id="div3">
    <a href="#">a1</a><br>
    <a href="#">a2</a><br>
    <a href="#">a3</a><br>
    <a href="#">a4</a><br>
    <button>加载更多...</button>
</div>

实现逻辑:

//通用的事件监听函数
function bindEvent(elem, type, selector,fn) {
    // step1.判断传参为 3 个还是 4 个
    if (fn == null) {//
        // 如果为3个,默认第3个赋值为函数
        fn = selector
        selector=null
    }
    // step2.做事件绑定
    elem.addEventListener(type,event=>{
        const target =event.target
        //step3.判断是否传入selector
        if (selector) {
            //代理绑定 -过滤指定选择器的绑定
            if (target.matches(selector)) { //match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
               fn.call(target,event) //call 改变this的指向,调用的事件指向当前选择的DOM元素
            }
        }else{
            //普通绑定 -不过滤所有选择器绑定都有效
            fn.call(target, event)
        }
        
    })
}

const div3 = document.getElementById('div3')
bindEvent(div3,'click','a',function(event){
    event.preventDefault();
    alert(this.innerHTML)
})

综上所述实现原理:
Step1.判断传参为 3 个还是 4 个
Step2.给元素添加事件绑定
Step3.判断是否传入selector,若传入,则为代理绑定,需要过滤指定选择器的绑定;若未传入,则为普通绑定 -不做过滤,所有选择器绑定都有效

上一篇下一篇

猜你喜欢

热点阅读