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

132 阅读1分钟
  function bindEvent(elem, type, selecter, fn) {
            if (fn == null) {
                // 如果没有传第四个参数那么第四个参数等于第三个参数 ,即 : fn = selecter
                fn = selecter
                selecter = null 
            }
       
            elem.addEventListener(type, function (e) {
                var target =e.target
                
                if (selecter) {  //有selecter相当于使用代理
               
                    if (target.matches(selecter)) {   //判断是否和你传的selecter相匹配
                    //改变this指向 
                     fn.call(target, e)
                    }
                } else {       //不使用代理 
                    
                    fn.call(target,e)
                }
            })
        }
      
      var div1 =document.querySelector('.div1')
      var p1 =document.querySelector('.p1')

        //使用代理 第三个参数相当于事件委托的写法
        bindEvent(div1, 'click', 'a',  function (e) {
            e.preventDefault()
          //不重要:给当前元素加个类名
            e.currentTarget.classList.add('is-active')
            console.log(dd);
        })

        // 不使用代理
        bindEvent(p1, 'click',  function (e) {
            e.preventDefault()
            console.log('pp')
        })