原生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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
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制作新闻系统的思路
2006/10/09 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
php时间戳转换代码详解
2019/08/04 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Python中turtle作图示例
2017/11/15 Python
Python如何调用外部系统命令
2019/08/07 Python
Python根据服务获取端口号的方法
2019/09/25 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
python sleep和wait对比总结
2021/02/03 Python
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
红领巾广播站广播稿
2014/02/01 职场文书
初中学生期末评语
2014/04/24 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏