高程4中模拟事件触发

引言

我们可以通过dom0和dom2事件绑定方法去绑定事件,浏览器有监听线程,当触发事件的时候会执行相应的方法,并传入事件对象

模拟事件触发

但是如果我们不想通过手动去触发这个事件,比如要触发一个点击事件就要真的去点击,但是我们想直接用代码在一个逻辑中完成与点击相同的操作,一般可以使用 elementObject.onclick()但是这样我们得不到事件对象ev,可以通过以下方式完成对点击事件的模拟触发不兼容IE6~8

const ev = document.createEvent("MouseEvent") //DOM2中参数是复数,DOM3是单数
//这里的MouseEvent还可以是KeyBoardEvent/Event,对应下面的initXxx

ev.initMouseEvent("click",true,true)    //模拟事件对象数据
//第二个参数: 是否冒泡
//第三个参数: 事件是否可以取消

elementObj.dispatchEvent(ev)        
//触发这个dom对象的点击事件还传了ev事件对象

自定义事件

说到自定义事件,就想到了发布订阅模式

// 单例模式的发布订阅
(function(){
    // 
    const pond = {}
    const on = function on(type,func){
        !pond[type]?pond[type]=[]:null
        if(!pond[type].includes(func)){
            pond[type].push(func)
        }
    }
    const off = function off(type,func){
        if(pond[type]){
            pond[type].forEach((item,index)=>{
                if(item===func){
                    pond[type][index]=null
                })
            }   
        }
    }
    const fire = function fire(type,...parmas){
        let arr = pond[type]
        if(arr){
            let i=0
            for(i;i<arr.length;i++){
                if(!arr[i]){
                    arr.splice(i,1)
                    i--
                    continue
                }
                arr[i](...parmas)
            }
        }
    }
    return {on,off,fire}
})()

这里模拟了事件的绑定移除和触发,但是还是无法实现通过addEventListener来绑定并且传入事件对象,这里可以自定义事件

elementObj.addEventListener("event_name",func)
const ev = document.createEvent("CustomEvent")
ev.initCustomEvent("event_name",true,true)
elementObj.dispatchEvent(ev)
原文链接:juejin.im

上一篇:koa2中间件的错误捕捉与async/await本质
下一篇:一篇Axios入门教程(for小白)

相关推荐

官方社区

扫码加入 JavaScript 社区