Особенности javaScript в IE8
Возможно в 2015 году поддержка IE8 не так актуальна, но когда вы работаете с большим объемом трафика, широким ГЕО посетителей и стараетесь захватить максимальную аудиторию, требования к поддержке браузеров становятся куда жоще. Сегодня я хотел бы поделиться парой особенностей работы javascript’a в IE8 и разобрать некоторые кейсы. Если вы адепт jQuery, можно перестать читать на этом моменте.
События
Когда мы работаем с событиями, часто бывает так, что this внутри каллбека ивента переопределен и ссылается на нужный нам объект. И хочется кроссбраузерно получить target
события без особого извращения. Смотрим пример.
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. Варианты решения?
- Просто воспользуемся
document.body.appendChild(script)
- Если мы все-таки хотим подключить именно в
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
Последняя редакция 31 января, 2023 в 04:01