原⽣js实现trigger⽅法
事件绑定成功之后，事件的执⾏函数就如同待字闺中的⼩姑娘。除了由坐在电脑前的⼤叔们⽤键盘、⿏标等硬件⾏为触发外，需要在代码中直接调⽤⼜该如何实现？
⾸先需要将事件绑定⾄指定DOM节点上
// 在⼀个节点上绑定⼀个事件
let test = ateElement('div');
test.id = 'test';
test.innerHTML = '测试事件';
原生js和js的区别
document.body.appendChild(test);
test.addEventListener('mousedown', function(){
console.log('hello jTool');
}, false)
事件绑定成功之后，事件的执⾏函数就如同待字闺中的⼩姑娘。除了由坐在电脑前的⼤叔们⽤键盘、⿏标等硬件⾏为触发外，需要在代码中直接调⽤⼜该如何实现？在 jQuery 中的事件类中包含⼀个trigger⽅法， 我之前写的类库 jTool 中同样也实现了该⽅法， 下⾯就以 jTool 的视⾓来说明下 trigger 如何实现。
绑定事件时使⽤ DOM 对象的 .addEventListener() ⽅法， ⽽实现 trigger 则是使⽤ DOM 对像的 .dispatchEvent() ⽅法。
.dispatchEvent() 需要以参数形式传⼊被派发的事件对象， 该事件对象可以通过 javascript 的全局构造函数 Event。
// 触发事件
var myEvent = new Event('mousedown');
test.dispatchEvent(myEvent); // => true
接下来实现在获取的节点上直接调⽤ .trigger() ⽅法
1.为Element 增加trigger⽅法
igger = function(eventName){
this.dispatchEvent(new Event(eventName));
}
let target = document.querySelector('#test');  // Element
2.为 NodeList 增加 trigger ⽅法
target = document.querySelectorAll('#test'); // NodeList
如上所⽰ .querySelectorAll() 获取的节点， 却并未存在 .trigger() ⽅法， 这是由于通过 .querySelectorAll() 获取到的是 NodeList 实例⽽⾮ Element。
igger = function(eventName){
[].forEach.call(this, function(item, index){
item.dispatchEvent(new Event(eventName));
});
}
target = document.querySelectorAll('#test'); // NodeList
⽽以上的⽅法仅限于直接绑定⾄ DOM 的事件，预绑定的事件,⽆法通过 new Event().dispatchEvent() 来执⾏, 且需要其它⽅法协同处理。
以上代码是在进⾏ jtool 类库编码时实践出来的⽅式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。