js实现trigger自动触发click事件
日期：2018-08-21
来源：程序思维浏览：10332次
trigger即事件触发,在jquery中我们经常用到,但用原生js该如何实现呢,其实也很简单,在这之前我们先了解一下js的自定义事件功能,即CustomEvent。
var event = document.createEvent("CustomEvent");
event.initCustomEvent("test", true, true, {a:1, b:2})
document.dispatchEvent(event);
document.addEventListener("test", function(e){ var obj = e.detail; console.log(obj.a + " " + obj.b); });
可以看到,我们首先创建自定义事件对象:
var event = document.createEvent("CustomEvent");
然后初始化事件对象:
event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);
其中,第一个参数为要处理的事件名
第二个参数为表明事件是否冒泡
第三个参数为表明是否可以取消事件的默认行为
第四个参数为细节参数
例如:event.initCustomEvent("test", true, true, {a:1, b:2}) 表明要处理的事件名为test,事件冒泡,可以取消事件的默认行为,细节参数为一个对象{a:"test", b:"success"}
最后触发事件对象:
document.dispatchEvent(event);
当然我们需要定义监控test事件的处理程序:
document.addEventListener("test", function(e){ var obj = e.detail; console.log(obj.a + " " + obj.b); });
但并不是所有的浏览器都支持CustomEvent,那我们该如何解决呢:
(function() {if (typeof window.CustomEvent === 'undefined') {function CustomEvent(event, params) {params = params || {bubbles: false,cancelable: false,detail: undefined};var evt = document.createEvent('Events');var bubbles = true;for (var name in params) {(name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);}evt.initEvent(event, bubbles, true);return evt;};CustomEvent.prototype = window.Event.prototype;window.CustomEvent = CustomEvent;}})();
首先要将一个完整的功能模块写在一个匿名函数体内,要养成这个习惯。然后就是通过typeof window.CustomEvent === 'undefined'来判断该浏览器是否支持CustomEvent,如不支持那就自己写一个,自己写的话主要应用Events,Events功能和CustomEvent类似,但大多浏览器都支持,写好后再将值赋予全局变量,那当前浏览器就也可以使用CustomEvent了。
CustomEvent还有一种写法:
document.dispatchEvent(new CustomEvent("test", {detail: {a:1, b:2},bubbles: true,cancelable: true })); //1 2 document.addEventListener("test", function(e){ var obj = e.detail; console.log(obj.a + " " + obj.b); });
这个写法主要应用了new CustomEvent,运行结果和之前一样。
好了,说好了CustomEvent,那我们来看看trigger是怎么实现的吧,其实很简单:
/** * 事件触发 * @param element 触发事件的DOM元素 event 事件名字,例如:'click'、'tap'、'swipeleft' data<json> 需要传递给事件的业务参数 */
var trigger = function(element,event,data){ element.dispatchEvent(new CustomEvent(event, {detail: data,bubbles: true,cancelable: true}));}
来测试下:
<body> <input id="test" type="button" value="测试" /></body>
var trigger = function(element,event,data){
element.dispatchEvent(new CustomEvent(event, {detail: data,bubbles: true,cancelable: true}));
}
document.getElementById("test").addEventListener("click",function (e) {
console.log("测试触发");
console.log(e.detail)
});
trigger(document.getElementById("test"),"click",{id:1,title:"哈哈"});
结果:
测试触发
在并没有点击test按钮的情况下,仍然通过trigger触发了click事件,说明测试成功。
var event = document.createEvent("CustomEvent");
event.initCustomEvent("test", true, true, {a:1, b:2})
document.dispatchEvent(event);
document.addEventListener("test", function(e){ var obj = e.detail; console.log(obj.a + " " + obj.b); });
可以看到,我们首先创建自定义事件对象:
var event = document.createEvent("CustomEvent");
然后初始化事件对象:
event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);
其中,第一个参数为要处理的事件名
第二个参数为表明事件是否冒泡
第三个参数为表明是否可以取消事件的默认行为
第四个参数为细节参数
例如:event.initCustomEvent("test", true, true, {a:1, b:2}) 表明要处理的事件名为test,事件冒泡,可以取消事件的默认行为,细节参数为一个对象{a:"test", b:"success"}
最后触发事件对象:
document.dispatchEvent(event);
当然我们需要定义监控test事件的处理程序:
document.addEventListener("test", function(e){ var obj = e.detail; console.log(obj.a + " " + obj.b); });
但并不是所有的浏览器都支持CustomEvent,那我们该如何解决呢:
(function() {if (typeof window.CustomEvent === 'undefined') {function CustomEvent(event, params) {params = params || {bubbles: false,cancelable: false,detail: undefined};var evt = document.createEvent('Events');var bubbles = true;for (var name in params) {(name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);}evt.initEvent(event, bubbles, true);return evt;};CustomEvent.prototype = window.Event.prototype;window.CustomEvent = CustomEvent;}})();
首先要将一个完整的功能模块写在一个匿名函数体内,要养成这个习惯。然后就是通过typeof window.CustomEvent === 'undefined'来判断该浏览器是否支持CustomEvent,如不支持那就自己写一个,自己写的话主要应用Events,Events功能和CustomEvent类似,但大多浏览器都支持,写好后再将值赋予全局变量,那当前浏览器就也可以使用CustomEvent了。
CustomEvent还有一种写法:
document.dispatchEvent(new CustomEvent("test", {detail: {a:1, b:2},bubbles: true,cancelable: true })); //1 2 document.addEventListener("test", function(e){ var obj = e.detail; console.log(obj.a + " " + obj.b); });
这个写法主要应用了new CustomEvent,运行结果和之前一样。
好了,说好了CustomEvent,那我们来看看trigger是怎么实现的吧,其实很简单:
/** * 事件触发 * @param element 触发事件的DOM元素 event 事件名字,例如:'click'、'tap'、'swipeleft' data<json> 需要传递给事件的业务参数 */
var trigger = function(element,event,data){ element.dispatchEvent(new CustomEvent(event, {detail: data,bubbles: true,cancelable: true}));}
来测试下:
<body> <input id="test" type="button" value="测试" /></body>
var trigger = function(element,event,data){
element.dispatchEvent(new CustomEvent(event, {detail: data,bubbles: true,cancelable: true}));
}
document.getElementById("test").addEventListener("click",function (e) {
console.log("测试触发");
console.log(e.detail)
});
trigger(document.getElementById("test"),"click",{id:1,title:"哈哈"});
结果:
测试触发
在并没有点击test按钮的情况下,仍然通过trigger触发了click事件,说明测试成功。
- 上一篇：Vue MVVM实现原理深度解析
- 下一篇：iview如何使用第三方iconfont
精品好课
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...