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


Posted in Javascript onMay 22, 2019

前言

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

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

总结

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

Javascript 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
js验证账户名是否重复
May 26 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 #Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 #Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
vue项目中mock.js的使用及基本用法
May 22 #Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 #Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 #Javascript
You might like
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php自定义错误处理用法实例
2015/03/20 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
javascript prototype 原型链
2009/03/12 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Django中Model的使用方法教程
2018/03/07 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
基于Django实现日志记录报错信息
2019/12/17 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
大学生实习感言
2014/01/16 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
2014年行政工作总结
2014/11/19 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python