原生js实现trigger方法

ivydom 发布于2019-05-23 17:34 / 709人阅读

摘要：触发事件接下来实现在获取的节点上直接调用方法为增加方法为增加方法如上所示获取的节点，却并未存在方法，这是由于通过获取到的是实例而非。而以上的方法仅限于直接绑定至的事件，预绑定的事件无法通过来执行且需要其它方法协同处理。

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

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

专线服务 idc机房托管原生js实现 ajax原生js实现原生js实现addclass 原生js实现ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7393.html

原生js实现trigger方法

摘要：绑定事件时使用对象的方法，而实现则是使用对像的方法。需要以参数形式传入被派发的事件对象，该事件对象可以通过的全局构造函数。而以上的方法仅限于直接绑定至的事件，预绑定的事件无法通过来执行且需要其它方法协同处理。事件绑定成功之后，事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外，需要在代码中直接调用又该如何实现？首先需要将事件绑定至指定DOM节...

fox_soyoung 2019-08-26 13:53 评论0 收藏0
jQuery源码解析之trigger()

摘要：一和的作用和区别触发被选元素上的指定事件以及事件的默认行为比如表单提交不会引起事件比如表单提交的默认行为触发所有匹配元素的指定事件只触发第一个匹配元素的指定事件会冒泡不会冒泡二被点击了作用看一源码触发事件，是自定义事件的额外参数源码行解析本 showImg(https://segmentfault.com/img/remote/1460000019375685); 一、$().trig...

sf_wangchong 2019-08-05 17:09 评论0 收藏0
jQuery源码解析之trigger()

摘要：一和的作用和区别触发被选元素上的指定事件以及事件的默认行为比如表单提交不会引起事件比如表单提交的默认行为触发所有匹配元素的指定事件只触发第一个匹配元素的指定事件会冒泡不会冒泡二被点击了作用看一源码触发事件，是自定义事件的额外参数源码行解析本 showImg(https://segmentfault.com/img/remote/1460000019375685); 一、$().trig...

Youngs 2019-08-23 17:56 评论0 收藏0
jQuery 源码系列（十四）自定义事件

摘要：不过也有自己的一套自定义事件方案。可以和事件拿来对比，他们都是用来模拟和执行监听的事件。冒泡事件就是就是由内向外冒泡的过程，这个过程不是很复杂。参考解密事件核心自定义设计三解密事件核心模拟事件四本文在上的源码地址，欢迎来。欢迎来我的专栏查看系列文章。以前，我只知道，只有当对浏览器中的元素进行点击的时候，才会出发 click 事件，其它的事件也一样，需要人为的鼠标操作。 showIm...

elliott_hu 2019-08-21 11:32 评论0 收藏0
jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

摘要：事件的绑定和解绑的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。由于浏览器事件冒泡特性，可以在触发时把这个事件往上冒泡到上，因为上绑定事件响应，所以能触发这个动作。事件的绑定和解绑 on()的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理...

niuxiaowei111 2019-08-22 10:53 评论0 收藏0