IE中的自定义事件，不使用库 [英] Custom events in IE without using libraries

问题描述

我的任务是在文档上触发自定义事件，而不使用任何类似jQuery或prototype的库。

所以我可以在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; //把我的东西放在
 document.dispatchEvent（event）; // fire event 
} 
 else if（document.createEventObject）// IE 
 {
 xxxxxxxxxxx 
} 
} 
  

现在我可以这样点火了：

 code> 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）

任何帮助或想法都不胜感激！

解决方案

OK根据edan edwards的这篇文章，我写了这个似乎工作的文章，但似乎是一个可恶的。下面的例子是基于元素#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？假：真
 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 
}）; 
  

I am tasked to fire custom events on the document without using any libraries like jQuery or prototype.

So I'm ok on Firefox doing this:

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

and now I can fire it like this:

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

and catch it like this (here I can use jQuery):

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

My question is, what can I do to make this work on IE (in other words, where I put the xxxxxxxxxxx )?

I think that the IE-equivalent should look something like this:

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

But that doesn't work. IE lets me use only predefined event-names (onclick, etc) and even some of those don't work (onmessage for example)

Any help or ideas are appreciated!

解决方案

OK Based on that article by dean edwards I wrote this which seems to work but it seems a but hacky. The example below is based on element #two nested inside #one so we can simulate event bubbling as I couldn't see or find a way to bubble custom events in 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
});

这篇关于IE中的自定义事件，不使用库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！