Kitaplık kullanmadan IE'deki özel olaylar

jQuery veya prototype gibi herhangi bir kütüphaneyi kullanmadan belgede özel olayları işlemek için görevlendirildim.Kitaplık kullanmadan IE'deki özel olaylar

Yani Firefox ilgili olanı iyiyim:

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

ve şimdi bu gibi kovabilir:

fireCustomEvent({ 
    category: 'test', 
    value: 123 
});

ve (burada jQuery kullanabilirsiniz) şöyle yakalamak:

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

sorum (Ben XXXXXXXXXXX koymak başka bir deyişle,) IE üzerinde bu işi yapmak için ne yapabiliriz, değil mi?

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

Ama bu işe yaramazsa:

IE-eşdeğer şuna benzer gerektiğini düşünüyorum. IE sadece önceden tanımlanmış olay adlarını kullanmamı sağlar (onclick, vb) ve hatta çalışmayanların bazıları (örneğin onmessage)

Herhangi bir yardım veya fikir takdir edilir!

kaynak

2011-03-17 HumanCatfood

OK özel yangın olaylarının ondataavailable olayı kullanır ama hacky ama görünüyor. Aşağıdaki örnekte #two iç içe yerleştirilmiş #two öğesine dayanmaktadır, böylece göremediğim veya IE'deki özel olayları işaretlemenin bir yolunu bulabildiğimiz gibi olay köpürmesini simüle edebiliriz.

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

kaynak

2011-04-05 17:11:42 screenm0nkey

Evet, sanırım işe yarıyor. Aferin, teşekkürler! – HumanCatfood

Sadece zevkimi IE7 ve 8 – screenm0nkey

'da test etsem bile zevkim Farklı bir olay modeli kullandığı için IE6'da çalışmaz. – screenm0nkey

Prototip iş gibi görünüyor ben yazdım Dean Edwards tarafından bu maddeye dayanarak IE

kaynak

2011-03-17 19:55:17 JaredMcAteer

hm, başlamak için iyi bir yer olabilir, teşekkür ederim! – HumanCatfood

Ekle// Yangın herhangi çerçeveler olmadan JavaScript Olaylar/Özel Olaylar kaldırın:

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

kaynak

2012-06-24 21:45:45

Bu cevapta uzmanlar tarafından herhangi bir artı/eksiler var mı? – Odys

Neden html olaylarını kontrol ettiğinizi sorabilir miyim? –

Altmış cevap. createEvent şimdi kullanımdan kaldırıldı, '(typeof window.CustomEvent === 'function') { olay = new CustomEvent (eventName, {detail: detail}); } ' İlk test olarak, modern tarayıcılar için – spoutnik

Kitaplık kullanmadan IE'deki özel olaylar

cevap

İlgili konular