原生js实现trigger方法示例代码

网络编程 2024/9/1 佚名

3 2 1

前言

事件绑定成功之后，事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外，需要在代码中直接调用又该如何实现？

首先需要将事件绑定至指定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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

js,trigger,js中trigger,原生js,trigger方法

标签：

js,trigger,js中trigger,原生js,trigger方法

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“原生js实现trigger方法示例代码”

原生js实现trigger方法示例代码

暂无“原生js实现trigger方法示例代码”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

原生js实现trigger方法示例代码

js,trigger,js中trigger,原生js,trigger方法

小程序如何使用分包加载的实现方法

koa router 多文件引入的方法示例

评论“原生js实现trigger方法示例代码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接