javascript - custom - Eventos personalizados en IE sin usar bibliotecas
javascript events listener (3)
De acuerdo con el artículo de Dean Edwards, escribí esto, que parece funcionar pero parece un poco intrépido. El ejemplo a continuación se basa en el elemento #two anidado dentro de #one, por lo que podemos simular el burbujeo de eventos, ya que no pude ver o encontrar una manera de crear eventos personalizados en 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
});
Tengo la tarea de activar eventos personalizados en el documento sin usar ninguna biblioteca como jQuery o prototipo.
Así que estoy bien en Firefox haciendo esto:
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
}
}
Y ahora puedo dispararlo así:
fireCustomEvent({
category: ''test'',
value: 123
});
y atraparlo así (aquí puedo usar jQuery):
$(document).bind(''myCustomEvent'', function (event) {
doStuff(event);
});
Mi pregunta es, ¿qué puedo hacer para que esto funcione en IE (en otras palabras, donde coloco el xxxxxxxxxxx)?
Creo que el equivalente de IE debería ser algo como esto:
var event = document.createEventObject();
event.data = eventData;
document.fireEvent(''myCustomEvent'', event);
Pero eso no funciona. IE me permite usar solo nombres de eventos predefinidos (onclick, etc.) e incluso algunos de ellos no funcionan (onmessage por ejemplo)
Cualquier ayuda o ideas son apreciadas!
Prototype utiliza el evento ondataavailable para activar eventos personalizados en IE
Agregar / eliminar / Eventos de fuego / Eventos personalizados en Javascript sin ningún marco:
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'');