Javascript - Browser naming conventions for event attributes confusing me

Question

I\'ve been wondering why there is a difference in the attribute name for an event\'s target/sourceElement in JavaScript for different browsers.

event.srcElement         


        

Answer 1

Internet Explorer is known to be a rebellious browser, especially in early versions, going by its own standards with the web API.

Although it is heavily criticized for this, we should be also thankful with it, since its rebellion has helped introduce some features that went on to become a standard, such as innerHTML and AJAX requests.

In this particular case, the difference in convention arises because older versions of IE use a different event model than the standard model other browsers use. With it, comes a series of differently named objects. From MDN:

On IE6-8, the event model is different. Event listeners are attached with the non-standard element.attachEvent() method. In this model, the event object has an srcElement property, instead of the target property, and it has the same semantics as event.target.

Internet Explorer started following standards more thoroughly in more recent versions, for instance, attachEvent is completely deprecated in IE11.

This same thing happens with some other stuff, hence why you've got to use fallbacks with certain features, if you want to support older versions of IE.

As to why they don't add aliases in Internet Explorer? Well, they eventually and sometimes introduce the standard API and keep their own standard for a while, which I believe is the case with the event model; It seems, for instance, that IE9 supports both addEventListener and attachEvent.

As to why they make their own standards, I think the top answer in here is a good explanation.

Answer 2

Every time you load up a web page, the browser is turning the code it gets into a usable format which your computer understands. However the different browsers do it in slightly different ways, so sometimes exceptions need to be made for certain browsers.

The browser is a translator, sometimes the translation can be different depending on who does the translation.

In this specific case I would guess Internet explorer understand srcElement, while all the others understand target.