原生js实现trigger方法

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


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

原文来自:https://segmentfault.com/a/1190000019253353


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3394

js中什么是事件冒泡?

在一个对象上触发某类事件,这个事件会向这个对象的的父级传播,从里到外,直至它被处理或者到达了对象层次的最顶层,即document对象。这个过程就是JavaScript的事件冒泡。

React添加事件

React添加事件,和DOM上添加事件类似,但又有细微的不同.React的事件命名采用小驼峰(camelCase)的命名方式,DOM采用的是纯小写的方式;

css3 pointer-events(阻止hover、active、onclick等触发事件)

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

js中addEventListener事件监听器参数详解

我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...

js如何取消事件传递?

如果在javascript中只希望事件发生在它的目标而不是在它的父元素上,即取消它的冒泡事件的发生,该如何做?因为按照javascript发生事件的顺序,它由两个阶段:分别从根元素--父元素--目标元素(捕获阶段),再到父元素--根元素

js有哪些常用事件?

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数。事件在HTML页面中定义。

js事件委托(事件代理)

js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的。 答案就是event对象记录的事件源

浏览器事件之事件流

事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流,分别是事件冒泡流和事件捕获流。E的事件流称为事件冒泡,从最具体的元素开始,然后逐渐向上传播到文档节点。

jQuery on()方法使用

本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下:此方法可以在匹配元素上绑定一个或者多个事件处理函数。使用off()方法可以删除on()方法绑定的事件。

vue.js 事件绑定

(1)使用v-on指令可以添加事件监听,语法:2)参数:$event就是当前触发事件的元素,即使不传$event,在回调函数中也可以使用event这个参数

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广