原生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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
Vue通过懒加载提升页面响应速度
May 10 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上传图片、删除图片实现代码
2010/05/12 PHP
学习php笔记 字符串处理
2010/10/19 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
JS 控件事件小结
2012/10/31 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
Django 返回json数据的实现示例
2020/03/05 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python中round函数如何使用
2020/06/19 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
python3代码中实现加法重载的实例
2020/12/03 Python
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
大型活动组织方案
2014/05/10 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL