自定义事件即不使用库

我负责火灾的文件自定义事件，而无需使用如jQuery或原型的库。自定义事件即不使用库

所以我确定在Firefox这样做：

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 
});

，赶上像这样（在这里我可以使用jQuery）：

$(document).bind('myCustomEvent', function (event) { 
    doStuff(event); 
});

我的问题是，我能做些什么来让IE浏览器这项工作（换句话说，在这里我把XXXXXXXXXXX）？

我认为IE当量应该是这个样子：

var event = document.createEventObject(); 
event.data = eventData; 
document.fireEvent('myCustomEvent', event);

但是，这并不工作。 IE让我只使用预定义的事件名称（的onclick等），甚至一些人不工作（的onMessage例如）

任何帮助或想法赞赏！

来源

2011-03-17 HumanCatfood

确定的，但它似乎是一个，但哈克。下面的例子是基于元素#two嵌套#one所以我们可以模拟事件冒泡，因为我无法看到或找到一种方法，在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 
});

来源

2011-04-05 17:11:42 screenm0nkey

是的，我认为这是有效的。干得不错，谢谢！ – HumanCatfood 2011-04-06 10:59:53

我的荣幸，即使我只在IE7进行了测试和8 – screenm0nkey 2011-04-06 14:53:33

，因为它使用了不同的事件模型，它不会工作在IE6。 – screenm0nkey 2011-04-06 15:09:46

原型使用ondataavailable事件基础上文章院长爱德华兹我写这似乎工作触发自定义事件在IE

来源

2011-03-17 19:55:17 JaredMcAteer

HM，可能是一个良好的开端，谢谢！ – HumanCatfood 2011-03-18 10:41:09

添加/删除/消防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');

Live demo

来源

2012-06-24 21:45:45

专家回答这个问题的优点/缺点吗？ – Odys 2014-01-09 13:49:30

请问为什么要检查html事件？ – 2014-07-18 13:49:27

低估答案。 createEvent现在已被弃用，我建议使用 'if（typeof window.CustomEvent ==='function'）{event = new CustomEvent（eventName，{detail：detail}）; }' 作为第一个测试，对于现代浏览器 – spoutnik 2016-04-01 11:21:58

自定义事件即不使用库

回答

相关问题