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

小灰灰 2022-12-18 06:54 107阅读 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;
        }
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

以上事件绑定函数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)
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/50c3e970e66049a19fd6a6804ab045b6.png