Особенности javaScript в IE8

change

var _this = this, //Сохраним ссылку
inputs = document.querySelectorAll('.input');
inputs.each(function (elem) {
elem.onchange = function (event) {
callbackFunction.call(_this, event);
}

});

Приведу еще пример навешивания события, давайте напишем аналог метода $.on в jQuery

on: function(el, eventName, callback, context) {

//Если браузер поддерживает addEventListener (IE9+)
if (el.addEventListener) {
el.addEventListener(eventName, function (e) {
callback.call(context, e);
}, false);

//Для IE9- пользуемся attachEvent
} else if(el.attachEvent) {
el.attachEvent('on' + eventName, function (e) {
callback.call(context, e);
});
}
},

Я привожу свой пример, в моем случае слушатели навешиваются только с переопределением контекста.

А что если мы захотим теперь не только слушать, но и тригерить события? давайте напишем аналог $.trigger

trigger: function(eventName, el) {
//Для IE9+ пользуемся стандартным способом
if (document.createEvent) {
var event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, false);
el.dispatchEvent(event);

} else {

//Для IE8 генерируем событие немного иным образом.
var evt = document.createEventObject();
el.fireEvent('on'+eventName, evt);
}
}

Теперь немного о обработчиках событий и корректного определения target у event’a.

function submitForm (event) {

//в IE8 в текущий момент event будет === undefined, объект события создается глобально у объекта window
event = event || window.event;

//Теперь давайте получим target события. IE8 ничего не знает про event.currentTarget будем пользоваться event.srcElement
var element = event.currentTarget || event.srcElement;

//Тут будет какая-то логика обработки формы
//Теперь нам вдруг понадобилось перехватить ивент, но event.preventDefault() в IE8 также не работает. Выход следующий.
event.preventDefault ? event.preventDefault() : event.returnValue = false;
//Больше проблем с обработкой events у вас возникнуть не должно.

}

Другие особенности

Теперь хотелось бы обратить внимание на другие особенности IE8

Например мы общаемся с сервером с помощью JSONP или нам просто необходимо вставить скрипт на страничку document.head в IE8 = undefined. Варианты решения?

1. Просто воспользуемся document.body.appendChild(script)
2. Если мы все-таки хотим подключить именно в head, конструкция станет немного сложнеe.document.getElementsByTagName('head')[0].appendChild(script)

Есть еще одна особенность IE8, а также IE9 это работа с тегом select. К примеру мы хотим добавить в селект некоторые новые option. В мажорных браузерах можно циклом пройтись по массиву элементов и сконкатенировать себе что-то в стиле newHtml += ‘<option value=»‘+foo.value+'»> ‘+foo.text+’ </option> и попробовать вставить через select.innerHtml = newHtml  но такой варианты увы не сработает. В документации мне найти не удалось, но вариант добавления новых опций в select следующий

//Напишем функцию для создания OPTION
var data = {name: 'Текст опции', value: 'Значение'};
var newOption = function (data) {
var option = document.createElement('OPTION');
option.text = data.text;
option.value = data.value;
return option;
}

//Теперь выбираем селект

var select = document.querySelector('.my_select');

select.options.add(newOption(data));

Также стоит помнить, что предпочтительная выборка в DOM в IE8 осуществляется с помощью document.querySelectorAll