Javascript IE中不使用库的自定义事件
我的任务是在文档上触发自定义事件,而不使用任何库,如jQuery或prototype 所以我同意Firefox这样做:Javascript IE中不使用库的自定义事件,javascript,internet-explorer,events,Javascript,Internet Explorer,Events,我的任务是在文档上触发自定义事件,而不使用任何库,如jQuery或prototype 所以我同意Firefox这样做: function fireCustomEvent(eventData) { if (document.createEvent) // Firefox { var event = document.createEvent('HTMLEvents'); // create event event.initEvent('myC
function fireCustomEvent(eventData)
{
if (document.createEvent) // Firefox
{
var event = document.createEvent('HTMLEvents'); // create event
event.initEvent('myCustomEvent', true, true ); // name event
event.data = eventData; // put my stuff on it
document.dispatchEvent(event); // fire event
}
else if (document.createEventObject) // IE
{
xxxxxxxxxxx
}
}
现在我可以这样发射它:
fireCustomEvent({
category: 'test',
value: 123
});
var event = document.createEventObject();
event.data = eventData;
document.fireEvent('myCustomEvent', event);
然后像这样捕捉它(这里我可以使用jQuery):
我的问题是,我能做些什么来让这个工作在IE上(换句话说,我把XXXXXXXXXX放在哪里)
我认为IE的等价物应该是这样的:
fireCustomEvent({
category: 'test',
value: 123
});
var event = document.createEventObject();
event.data = eventData;
document.fireEvent('myCustomEvent', event);
但这不起作用。IE允许我只使用预定义的事件名称(onclick等),甚至有些名称不起作用(例如onmessage)
任何帮助或想法都将不胜感激 Prototype使用ondataavailable事件在IE中触发自定义事件好的,基于dean edwards的那篇文章,我写了这篇文章,看起来很有效,但看起来很粗糙。下面的示例基于元素#两个嵌套在其中#一个,因此我们可以模拟事件冒泡,因为我在IE中看不到或找不到冒泡自定义事件的方法
function bindCustomEvent (el, eventName, eventHandler) {
if (el.attachEvent) {
if (!el[eventName]) {
el[eventName] = 0;
}
el.attachEvent("onpropertychange", function (event) {
if (event.propertyName == eventName) {
eventHandler(eventHandler);
}
});
}
}
bindCustomEvent(document.documentElement, "fakeEvents", function (evt) {
alert('document');
});
bindCustomEvent(document.getElementById('one'), "fakeEvents", function (evt) {
alert('one');
});
bindCustomEvent(document.getElementById('two'), "fakeEvents", function (evt) {
alert('two');
});
dispatchFakeEvent = function (el, eventName, bubble) {
bubble = !bubble ? false : true;
if (el.nodeType === 1 && el[eventName] >= 0) {
el[eventName]++;
}
if (bubble && el !== document) {
dispatchFakeEvent(el.parentNode, eventName, bubble);
}
};
document.getElementById('click').attachEvent('onclick', function () {
dispatchFakeEvent(document.getElementById('two'), 'fakeEvents', true);//false = bubble
});
在没有任何框架的Javascript中添加/删除/触发事件/自定义事件:
var htmlEvents = {// list of real events
//<body> and <frameset> Events
onload:1,
onunload:1,
//Form Events
onblur:1,
onchange:1,
onfocus:1,
onreset:1,
onselect:1,
onsubmit:1,
//Image Events
onabort:1,
//Keyboard Events
onkeydown:1,
onkeypress:1,
onkeyup:1,
//Mouse Events
onclick:1,
ondblclick:1,
onmousedown:1,
onmousemove:1,
onmouseout:1,
onmouseover:1,
onmouseup:1
}
function triggerEvent(el,eventName){
var event;
if (typeof window.CustomEvent === 'function') {
event = new CustomEvent(eventName);
} else if (document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName,true,true);
}else if(document.createEventObject){// IE < 9
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
if(el.dispatchEvent){
el.dispatchEvent(event);
}else if(el.fireEvent && htmlEvents['on'+eventName]){// IE < 9
el.fireEvent('on'+event.eventType,event);// can trigger only a real event (e.g. 'click')
}else if(el[eventName]){
el[eventName]();
}else if(el['on'+eventName]){
el['on'+eventName]();
}
}
function addEvent(el,type,handler){
if(el.addEventListener){
el.addEventListener(type,handler,false);
}else if(el.attachEvent && htmlEvents['on'+type]){// IE < 9
el.attachEvent('on'+type,handler);
}else{
el['on'+type]=handler;
}
}
function removeEvent(el,type,handler){
if(el.removeEventListener){
el.removeEventListener(type,handler,false);
}else if(el.detachEvent && htmlEvents['on'+type]){// IE < 9
el.detachEvent('on'+type,handler);
}else{
el['on'+type]=null;
}
}
var _body = document.body;
var customEventFunction = function(){
console.log('triggered custom event');
}
// Subscribe
addEvent(_body,'customEvent',customEventFunction);
// Trigger
triggerEvent(_body,'customEvent');
var htmlEvents={//实际事件列表
//和事件
加载:1,
onunload:1,
//形成事件
一,,
变化:1,
重点:1,
重置:1,
当选:1,
问题:1,
//图像事件
onabort:1,
//键盘事件
onkeydown:1,
onkeypress:1,
onkeyup:1,
//鼠标事件
onclick:1,
点击:1,
一,,
移动:1,
一,,
一,,
onmouseup:1
}
函数triggerEvent(el、eventName){
var事件;
if(typeof window.CustomEvent=='function'){
事件=新的CustomEvent(eventName);
}else if(document.createEvent){
event=document.createEvent('HTMLEvents');
initEvent(eventName,true,true);
}else如果(document.createEventObject){//IE<9
event=document.createEventObject();
event.eventType=eventName;
}
event.eventName=eventName;
if(el.dispatchEvent){
el.调度事件(事件);
}else if(el.firevent&&htmlEvents['on'+eventName]){//IE<9
el.fireEvent('on'+event.eventType,event);//只能触发真实事件(例如“单击”)
}else if(el[eventName]){
el[eventName]();
}else if(el['on'+eventName]){
el['on'+eventName]();
}
}
函数addEvent(el、类型、处理程序){
如果(el.addEventListener){
el.addEventListener(类型、处理程序、false);
}else if(el.attachEvent&&htmlEvents['on'+type]){//IE<9
el.attachEvent('on'+类型,处理程序);
}否则{
el['on'+类型]=处理器;
}
}
函数removeEvent(el、类型、处理程序){
如果(el.removeEventListener){
el.removeEventListener(类型、处理程序、false);
}else if(el.detachEvent&&htmlEvents['on'+type]){//IE<9
el.detachEvent('on'+类型,处理程序);
}否则{
el['on'+类型]=null;
}
}
var_body=document.body;
var customEventFunction=函数(){
log(“触发的自定义事件”);
}
//订阅
addEvent(_body,'customEvent',customEventFunction);
//触发
triggerEvent(_body,'customEvent');
我很高兴,尽管我只在IE7和8meh中测试过,但如果人们坚持使用该产品,他们就不应该得到更好的结果:-)谢谢你的帮助!这在很多情况下都很好,但最大的缺陷是它需要一种特殊的方式来绑定事件。如果您控制执行绑定的代码,这是可以的,但是如果您正在创建一个供其他人使用的控件,并且希望该控件能够触发自定义事件,则这是有问题的。不幸的是,我还没有找到在IE中真正触发自定义事件的方法。如果对
文档而不是documentElement
进行绑定,那么onpropertychange
事件不会被触发有什么原因吗?专家们对这个答案有什么赞成/反对的地方吗?我可以问一下为什么要检查html事件吗?答案被低估了。createEvent现在已被弃用,我建议使用if(typeof window.CustomEvent=='function'){event=new CustomEvent(eventName,{detail:detail});}
作为第一个测试,为了现代browsers@SergeyGospodarets您应该测试window.CustomEvent
的类型,就像android webkits<4.3window中一样。CustomEvent
存在,但不是构造函数@see。你好,斯帕特尼卡,这是个老问题,但我非常喜欢这个答案。我们是否可以在事件中附加其他对象信息(我知道CustomEvent支持它,但不确定ie版本?)