Home & blog  /  Scripts  /  view post  /

MSThis - simulate W3C events in IE

Overview

This script simulates W3C event handling in IE, fixing the old problem of IE registering events on the window object, not the element that triggered the event. This can cause real headaches, particularly in object-oriented Javascript.

Events are added using the W3C addEventListener() method. Note this script does not bring event capture support to IE, which remains unsupported in MS browsers.

Example

Click me and I'll turn red and bold, even in IE!

Here's the code for this example:

1$(function() {

2     registerEvent(document.getElementById('myLink'), 'click', function() {

3         this.style.color = '#f00';

4         this.style.fontWeight = 'bold';

5     });

6});

^^ top of page

Usage

The script creates a global function, registerEvent, which accepts the same arguments as the standard addEventListener except the first argument should be the element to bind to.

^^ top of page

Notes

This script works by storing an event handler on an element, then firing them as methods of it. It is cross-browser compatible, including IE6.

^^ top of page
post new comment

Comments (2)

OKoweb, at 21/09/'10 13:39, said: 
Why can i attach event on element, which insert after the dom?

                                                  if (navigator.appName == 'Microsoft Internet Explorer'){  // pour IE
                                                                          monInput = document.createElement("");
                                                                                    monInput.type = "radio"; 
                                                                                    var monInputId = monInput.id = 'services'+items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue;
                                                                                    monInput.value = items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue;
                                                                          container.appendChild(monInput);
                                                                                    //registerEvent(document.getElementById(monInputId), 'click', fillservices);
                                                                      }
                                                            else{ // pour FF et autres navigateurs
                                  domscripter({element: 'input',parent: container,
                                                                           attrs: {type: 'radio',id: 'services'+items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,name: 'services',value: items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue},
                                                                                               evts: {click: fillservices}
                                                                                               });                                                                      
                                                                      }

The problem is there :
registerEvent(document.getElementById(monInputId), 'click', fillservices);

fillservices = function() { 
                           alert(this.value);
                    }

Where is my error?
OKoweb, at 22/09/'10 09:07, said: 
It's okay.

Thank