原生js完成trigger要领

2024年5月24日 127次阅读 来源: 拭目以待

事宜绑定胜利以后，事宜的实行函数就犹如待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行动触发外，须要在代码中直接挪用又该怎样完成？

起首须要将事宜绑定至指定DOM节点上

// 在一个节点上绑定一个事宜
let test = document.createElement('div');
test.id = 'test';
test.innerHTML = '测试事宜';
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要领

Element.prototype.trigger = function(eventName){
    this.dispatchEvent(new Event(eventName));
}
let target = document.querySelector('#test');  // Element
target.trigger('mousedown'); // => 'hello jTool'

2.为 NodeList 增添 trigger 要领

target = document.querySelectorAll('#test'); // NodeList
target.trigger('mousedown');  // => Uncaught TypeError: target.trigger is not a function

如上所示 .querySelectorAll() 猎取的节点， 却并未存在 .trigger() 要领， 这是因为经由过程 .querySelectorAll() 猎取到的是 NodeList 实例而非 Element。

NodeList.prototype.trigger = function(eventName){
    [].forEach.call(this, function(item, index){
        item.dispatchEvent(new Event(eventName));
    });
}
target = document.querySelectorAll('#test'); // NodeList
target.trigger('mousedown');  // => hello jTool

而以上的要领仅限于直接绑定至 DOM 的事宜，预绑定的事宜,没法经由过程 new Event().dispatchEvent() 来实行, 且须要别的要领协同处置惩罚。

以上代码是在举行jtool类库编码时实践出来的体式格局，迎接star

    原文作者：拭目以待
    原文地址: https://segmentfault.com/a/1190000019253353
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞