JS-事件-写一个通用的事件监听函数

之前学习总是遇到问题再去研究表面知识,这是不可取的,在这里我们来写一个绑定事件的函数,以此巩固我们对JS事件相关知识点的理解

在这里我会解释一下各个参数之间的关系

function bindEvent(elem, type, selecter, fn) {
            if (fn == null) {
                //判断一下selecter这个参数是否存在
                fn = selecter
                selecter = null
            }
            elem.addEventListener(type, function (e) {
                //代理
                if (selecter) {
                    //代理
                    var target = e.target
                    if (target.matches(selecter)) {
                    //这里target代表出发事件的节点,是否和你传的selecter相匹配
                        fn.call(target, e)
                    }
                } else {
                    //
                    fn(e)
                }
            })
        }

例:我希望给div1里面的a标签绑定事件,但div1里的其他标签元素不绑定事件,注意此时是需要代理的。

 var div1 = document.getElementById('div1')
        bindEvent(div1, 'click', 'a',  function (e) {
            e.preventDefault()
            console.log(this.innerHTML)
        })

例:我希望给id为p1的p标签绑定事件

bindEvent(p1, 'click',  function (e) {
    // e.preventDefault()
    console.log('666')
})

这样大致就可以做到通用了,我们希望他的健壮性好一些,所以拐了几个弯,大家可以实际敲一下。

猜你喜欢

转载自blog.csdn.net/jbj6568839z/article/details/83115755
今日推荐