大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
假设有一个id为testA的a元素，然后有以下代码(jquery已存在)：
$(document).ready(function(){
$('#testA').on('testEvent', function(e,data1,data2,data3){
console.log(e,data1,data2,data3);
});
var ba = document.getElementById('testA');
ba.addEventListener('testEvent', function(e){
console.log(e);
});
});
即，用两种方法监听一个自定义事件：testEvent，再看看如何触发testEvent事件：
document.addEventListener('click', function(e){
$('#testA').trigger('testEvent', [2,3,4]);
});
实际上只有用on监听的才能起作用，就是说用jquery的方法trigger来发事件，就只能用jquery的方法on[或者其他.click(handler)之类的]来监听事件，而用js原生的addEventListener方法是不行的。
为解决上面的问题，我们可以这样：
var evt = new Event('testEvent');
var ba = document.getElementById('testA');
ba.dispatchEvent(evt);
如果要带上自定义数据，可以这样：
var evt = new CustomEvent('testEvent',{detail:[2,3,4],a:1,b:3});
var ba = document.getElementById('testA');
ba.dispatchEvent(evt);
然后在事件处理函数中，可以通过event.detail来访问需要的数据，但event对象里面没有a，b属性，此处不清楚内部原因，是不是只有一个detail属性可用也不得而知。更多的说明可以看这里：https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent
上面的方法在firefox，chrome上可行，但IE8及以下版本浏览器不可行，下面来处理IE的问题。
IE8发事件函数用的是fireEvent，创建事件对象用的是document.createEventObject()，看下面的代码：
var evt = document.createEventObject();
evt.x = 100;
evt.y = 200;
evt.button = 1;
evt.z = 34;
ba.fireEvent('onclick', evt);
注意，我把testEvent换成了onclick，因为IE8不支持自定义事件。
接下来实现通用的发事件方法，如果要兼容IE8，那么就不能发送自定义事件：
function triggerEvent(element,eventType){
var e;
if(element.dispatchEvent){//正常情况
e = new Event(eventType);
element.dispatchEvent(e);
}else if(element.fireEvent){//IE
e = document.createEventObject();
e.button = 1;
element.fireEvent('on'+eventType,e);
}else if(element['on'+eventType]){
element['on'+eventType].call();
}
}
上面的方法，如果在IE8及以下版本中运行是无法发送自定义事件的。如果允许用jquery的trigger方法，还是用jquery比较方便。
转载于:https://www.cnblogs.com/ywxgod/p/4467814.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/234785.html原文链接：https://javaforall.net
