原生js实现trigger方法示例代码
前言
事件绑定成功之后，事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外，需要在代码中直接调用又该如何实现？
首先需要将事件绑定至指定DOM节点上
//在一个节点上绑定一个事件
lettest=document.createElement('div');
test.id='test';
test.innerHTML='测试事件';
document.body.appendChild(test);
test.addEventListener('mousedown',function(){
console.log('hellojTool');
},false)
事件绑定成功之后，事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外，需要在代码中直接调用又该如何实现？在jQuery中的事件类中包含一个trigger方法，我之前写的类库jTool中同样也实现了该方法，下面就以jTool的视角来说明下trigger如何实现。
绑定事件时使用DOM对象的.addEventListener()方法，而实现trigger则是使用DOM对像的.dispatchEvent()方法。
.dispatchEvent()需要以参数形式传入被派发的事件对象，该事件对象可以通过javascript的全局构造函数Event。
//触发事件
varmyEvent=newEvent('mousedown');
test.dispatchEvent(myEvent);//=>true
接下来实现在获取的节点上直接调用.trigger()方法
1.为Element增加trigger方法
Element.prototype.trigger=function(eventName){
this.dispatchEvent(newEvent(eventName));
}
lettarget=document.querySelector('#test');//Element
target.trigger('mousedown');//=>'hellojTool'
2.为NodeList增加trigger方法
target=document.querySelectorAll('#test');//NodeList
target.trigger('mousedown');//=>UncaughtTypeError:target.triggerisnotafunction
如上所示.querySelectorAll()获取的节点，却并未存在.trigger()方法，这是由于通过.querySelectorAll()获取到的是NodeList实例而非Element。
NodeList.prototype.trigger=function(eventName){
[].forEach.call(this,function(item,index){
item.dispatchEvent(newEvent(eventName));
});
}
target=document.querySelectorAll('#test');//NodeList
target.trigger('mousedown');//=>hellojTool
而以上的方法仅限于直接绑定至DOM的事件，预绑定的事件,无法通过newEvent().dispatchEvent()来执行,且需要其它方法协同处理。
以上代码是在进行jtool类库编码时实践出来的方式，欢迎star
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。