自定義事件即不使用庫

我負責火災的文件自定義事件，而無需使用如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

自定義事件即不使用庫

回答

相關問題