高程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)