Javascript.RU

Способы добавления обработчиков в сравнении

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/introduction-browser-events.

В статье приводится сравнение способов добавления обработчиков через on(click), addEventListener и attachEvent.

Рассмотрены особенности, плюсы и минусы разных способов.

Считается, что вы знакомы с основными свойствами объекта события и порядком их обработки.

Самый универсальный метод. У него есть, пожалуй, только один существенный недостаток: можно повесить лишь один обработчик.

Кроме того, есть глюк с iframe: в Firefox не будет работать обработчик, назначенный так:

iframeElement.onclick = function(event) { .... }

Но будет прекрасно работать addEventListener:

iframeElement.addEventListener( "click", ... )
  1. Полная кросс-браузерность
  2. Только один обработчик на событие
  3. Глюк с iframe в браузерах от Mozilla

Методы attachEvent/addEventListener имеют ряд общих недостатков.

Во-первых, ни W3C ни Microsoft не определяют порядок срабатывания обработчиков. Несколько обработчиков одного события на элементе могут сработать в любом порядке.

На текущий момент (март 2010) addEventListener сохраняет порядок назначения обработчиков, а attachEvent в IE - нет.

elem.attachEvent("onclick", handler);
elem.attachEvent("onclick", handler2);
// может быть так, что handler2 сработает раньше handler. 
// так, судя по демке ниже, ведет себя IE.
// а может быть, handler сработает раньше handler2.
// так в демо ниже ведет себя Opera
// ... вообще, порядок неопределен

На одну и ту же кнопку вешаются пять обработчиков onclick: первый выдает "1", второй выдает "2" и т.п.

Есть еще одна проблема, с которой можно столкнуться при управлении событиями: нельзя точно сказать установлен ли определённый обработчик, или нет, и какие обработчики установлены на данный момент.

В спецификации DOM 3 существует объект eventListenerList, но он слишком новый и на данный момент не поддерживается ни одним из браузеров.

Обработчик ставится как:

element.attachEvent( "on"+имя_события, обработчик)

Основной недостаток attachEvent заключается в том, что функция-обработчик не получает текущий элемент, на котором сработало событие, ни в каком виде.

Значение this указывает на window, а свойство event.currentTarget отсутствует.

И это достаточно важная особенность!

Например, пусть мы хотим подсвечивать divElem при клике.

Элемент divElem с разным текстом и различными ссылками, и даже с жирным текстом внутри тага <b>

Конечно, же мы повесим обработчик на divElem:

divElem.attachEvent("onclick", handler)

Но при клике из объекта события event в IE можно получить только srcElement, то есть самый глубокий кликнутый элемент. Он может быть ссылкой <a> или элементом <b>, но нам-то нужны не они, а сам divElem, чтобы его подсветить.

Обработчик, добавленный при помощи attachEvent никак не может выяснить объект, на который подвешен.

Впрочем, это легко обойти при помощи небольшого замыкания, корректно передающего указатель this:

divElem.attachEvent("onclick", function() { handler.call(divElem) })

Но этот код порождает утечку памяти в Internet Explorer 6, на который не установлено исправляющее обновление, вышедшее в июне 2007 года, из-за круговой ссылки DOM <-> JS.

  • Можно повесить несколько обработчиков на одно событие
  • Не передается текущий элемент.
  • Поддерживается только IE/Opera.

Решение W3C работает во всех современных браузерах, кроме Internet Explorer.

Установка обработчика:

element.addEventListener( имя_события, обработчик, фаза)

Пожалуй, особенных недостатков, кроме общих с attachEvent, у этого способа нет.

  • Можно повесить несколько обработчиков на одно событие
  • Умеет вешать обработчики на фазу погружения события
  • Стандарт W3C
  • Не поддерживается IE.

В следующей статье разобран способ, позволяющий добавлять обработчики кроссбраузерно и свободный от описанных недостатков.


Автор: Misha_White, дата: 25 февраля, 2010 - 08:57
#permalink

А как удалить свой пост?


Автор: thunder2, дата: 28 февраля, 2010 - 01:53
#permalink

Никак ! Мучайся теперь всю жизнь !


Автор: alex33, дата: 3 ноября, 2013 - 13:05
#permalink

Около коммента есть ссылка "изменить". Нажми на неё и напиши, например: "Комментарий удалён."


Автор: airfly (не зарегистрирован), дата: 1 мая, 2010 - 19:19
#permalink

Вот я только одного не могу понять:
какой толк в attachEvent и addEventListener, если все всеравно все они выполняются по одному событию? Ну напишу я 10 раз attachEvent, перечислив 10 разных функций. И что? Где это пригодится на практике? Проще объявить onclick, адрес функции и в ней уже перечислить список тех 10 функций. Разве так не проще?
На практике одно и тоже. Я не вижу ВООБЩЕ никаких плючов у attachEvent, за исключением примера с iframe


Автор: Гость (не зарегистрирован), дата: 3 мая, 2010 - 02:26
#permalink

Скачал ты чей-то скрипт, а он ставит обработчик через elem.on(событие). И убил все твои обработчики на это событие.


Автор: Castigo (не зарегистрирован), дата: 8 июня, 2010 - 13:09
#permalink

разовый обработчик не всегда есть возможность написать. Ибо элемент может не существовать, а появляться в результете каких-либо действий пользователя. Тут и поможет создание такого обработчика.


Автор: Гость (не зарегистрирован), дата: 10 июля, 2014 - 16:32
#permalink

И в правду, зачем вешать onclick'и через addEventListener и attachEvent, эсли
можно сделать проще:

function alertgroup()
{
alert('1');
alert('2');
alert('3');
alert('4');
alert('5');
}
//или свой список функций

И тем более, attachEvent нестабильно работает в Опере и IE.


Автор: THERE (не зарегистрирован), дата: 3 июня, 2010 - 10:13
#permalink

Демо: порядок срабатывания

На одну и ту же кнопку вешаются пять обработчиков onclick: первый выдает "1", второй выдает "2" и т.п.

у меня по кнопке addEventListener выдаются алерты с 1 по 7 на FF.
это чей-то глюк или опечатка?


Автор: Гость (не зарегистрирован), дата: 13 июня, 2010 - 13:42
#permalink

Видимо это можно отнести к недостутку этого способа - когда алертишь 5 раз он алертится 7 раз :-))))

ps: если открыть исходник страницы, то можно увидить

var b = document.getElementById('2ff')
if (b.addEventListener) {
b.addEventListener('click', function() { alert(1) }, false)
b.addEventListener('click', function() { alert(2) }, false)
b.addEventListener('click', function() { alert(3) }, false)
b.addEventListener('click', function() { alert(4) }, false)
b.addEventListener('click', function() { alert(5) }, false)
b.addEventListener('click', function() { alert(6) }, false)
b.addEventListener('click', function() { alert(7) }, false)
}

Автор: Гость (не зарегистрирован), дата: 5 сентября, 2010 - 12:05
#permalink

Исходники страниц браузер делает сам, поэтому не верь ему.
Если на сайте при входе будет работать сценарий, который выводит "Привет (Ваш ник(Допустим proVIDec))!", то при просмотре исходного кода браузер даст не php скрипт, а текст "Превет proVIDec".


Автор: B@rmaley.e><e, дата: 5 сентября, 2010 - 13:50
#permalink

Браузер ничего с исходниками страниц не делает. Он рендерит то, что отдаст сервер.

А обработкой php скриптов (как и любых других server-side'овых) как раз занимается сервер.


Автор: Гость (не зарегистрирован), дата: 9 января, 2011 - 02:02
#permalink

Впрочем, это легко обойти при помощи небольшого замыкания, корректно передающего указатель this:

divElem.attachEvent("onclick", function() { handler.call(divElem) })

А вот так

divElem.attachEvent("onclick", handler.call(divElem) )

передать получится?


Автор: Гость (не зарегистрирован), дата: 24 января, 2011 - 13:53
#permalink

Третий параметр в addEventListener совсем не понятен Sad Что за "фаза погружения"?


Автор: Гость (не зарегистрирован), дата: 26 января, 2011 - 17:37
#permalink

Этот параметр объяснялся в главе введение в события:

Установка по стандарту W3C
Решение W3C работает во всех современных браузерах, кроме Internet Explorer.
Установка обработчика:element.addEventListener( имя_события, обработчик, фаза)
Удаление обработчика:element.removeEventListener( имя_события, обработчик, фаза)

Еще одно отличие от решения Microsoft это третий параметр – фаза.
Если он установлен в true, то при срабатывании события во вложенном элементе, обработчик будет вызван на фазе "перехвата", а если значение будет false, то - на фазе "всплывания". Подробнее об этом будет написано далее, в разделе этой статьи "Порядок срабатывания событий".


Автор: demoniqus, дата: 16 мая, 2012 - 19:17
#permalink

Немного дополню данный пост. Зачастую в функцию требуется передать некоторые параметры. Как вариант, можно расплодить глобальные переменные или создать один глобальный массив, из которого и вытягивать нужные значения. А можно решить данный вопрос и другим способом. Приведу свою функцию:

function select_country(country_id, step) {
    request = 'some request';
    rslt = GenerateXMLHttpRequest(request, 'php/some_file.php');
    rslt = rslt.match(/([^;]+);([^\|]+)\|(.+)/);
/*
Нулевой элемент - тип возвращенного ответа
Первый элемент - текст надписи
Второй - элементы списка (options'ы)
*/
    document.getElementById('div_region').innerHTML = document.getElementById('div_city').innerHTML = '';    
    if (rslt[1] == 'regions') {
        
        rsl = "<select id='region'>" + rslt[3] + "</select>";        
        document.getElementById('div_region').innerHTML = rsl;
        select_city = '';
        select_region = '';
 
        eval("select_city = function () {step = " + step +
                ";if (document.getElementById(\"city\").value != \"\") {" +
                    "document.getElementById(\"city\").setAttribute(\"correct\", 1);" +
                "} " +
                "else {" +
                    "document.getElementById(\"city\").setAttribute(\"correct\", 0);" +
                "}" +
                "is_fields_correct(" + step + ")" +
            "}")
        
        eval('select_region = function () {step = ' + step + 
            ';if (document.getElementById("region").value != "") {' +
                'document.getElementById("region").setAttribute("correct", 1);' +
            '} ' +
            'else {' +
                'document.getElementById("region").setAttribute("correct", 0);' +
            '}' +
            'is_fieldsvalue_correct(' + step + ');' +
            'request = "lang=" + LANG + "&doit=is_select_region&id_country=" ' +
                '+ document.getElementById("country").value + "&id_region=" + ' +
                'document.getElementById("region").value;' +
            'rslt = GenerateXMLHttpRequest(request, "php/doit.php");' +
            'rslt = rslt.match(/([^;]+);([^\\|]+)\\|(.+)/);' +
            'document.getElementById("div_city").innerHTML = "";' +
            'if (rslt[1] == "cities") {' +
                'rsl = "<div id=\'caption_select_city\'>" + rslt[2] + "</div>";' +
                'rsl += "<select id=\'city\'>" + rslt[3] + "</select>";' +
                'document.getElementById("div_city").innerHTML = rsl;' +
                
                
                
                'if (document.getElementById("city").addEventListener) {' +
                    'document.getElementById("city").addEventListener("change", ' + select_city + ', false);' +
                '}' +
                'else if (document.getElementById("city").attachEvent) {' +
                    'document.getElementById("city").attachEvent("onChange", ' + select_city + ');' +
                '}' +
            '}' +
        '}')
        


        
        if (document.getElementById('region').addEventListener) {
            document.getElementById('region').addEventListener('change', select_region, false);
        }
        else if (document.getElementById('region').attachEvent) {
            document.getElementById('region').attachEvent('onChange', select_region);
        }
    }
    if (rslt[1] == 'cities') {
        rsl = "<div id='caption_select_city'>" + rslt[2] + "</div>";
        rsl += "<select id='city'>" + rslt[3] + "</select>";
        document.getElementById('div_city').innerHTML = rsl;
    }
    
    
}

В данной функции генерится код двух других функций с подстановкой значений необходимых параметров в текстовом виде, после чего он прогоняется через eval - в результате мы имеем две функции select_region и select_city со всеми параметрами, которые им требовалось передать.


Автор: Гость (не зарегистрирован), дата: 23 мая, 2012 - 19:25
#permalink

Плохое решение. Лучше сделать это с использованием замыкания.


Автор: Гость (не зарегистрирован), дата: 6 марта, 2013 - 18:46
#permalink

Придётся делать свой луна-парк.. Всем одна функция, в функции лист обработчиков. В принципе если сесть и подумать то легко, только как не дать убить никогда свой универсальный on<событие>?


Автор: Vladimir M (не зарегистрирован), дата: 16 марта, 2013 - 19:59
#permalink
Впрочем, это легко обойти при помощи небольшого замыкания, корректно передающего указатель this:
divElem.attachEvent("onclick", function() { handler.call(divElem) })

Вот только не всегда знаешь, какой это "divElem". А если есть список элементов, на который надо циклом назначить один обработчик, то здесь ваше решение не поможет.


Автор: koeshiro, дата: 14 июля, 2013 - 09:43
#permalink

Где можно найти имена всех событий?


Автор: Гость (не зарегистрирован), дата: 25 марта, 2014 - 13:30
#permalink

Узнал про Greasemonkey. Тренируюсь. Почему-то нижеследующий скрипт работает практически всюду, кроме "e.mail.ru", подскажите почему?

window.addEventListener('load',function(e){
alert('alert [10-33-12]');
},true);


Автор: Гость (не зарегистрирован), дата: 24 июля, 2014 - 13:28
#permalink

Alert 1


Автор: iamxaoc (не зарегистрирован), дата: 29 декабря, 2014 - 11:25
#permalink

"Особенности addEventListener

Решение W3C работает во всех современных браузерах, кроме Internet Explorer."

Работает в IE 9 >

Только что проверил в IE 11 - все ок


Автор: Мизар (не зарегистрирован), дата: 10 июля, 2015 - 17:19
#permalink

Подскажите пожалуста кто нибуть!
Имеем опредиленый код формы:

<div id="content">
<form action="game.php" onsubmit="return CheckTarget()" method="post">
<input type="hidden" name="token" value="miska">
   	<table class="table519">
		<tr class="left top">
			<td style="width:50%;margin:0;padding:0;">
        		<table border="0" cellpadding="0" cellspacing="0" width="259" style="margin:0;padding:0;">
					<tr style="height:20px;">
						<td class="transparent left">
						<input id="radio_8" type="radio" name="mission" value="8"  style="width:60px;">
						<label for="radio_8">Перемешать</label>
						</td>
					</tr>
				</table>
        	</td>
        	<td class="top">
				<table border="0" cellpadding="0" cellspacing="0" width="259">
                    <tr style="height:20px;">
        				<td class="transparent">Капуста</td>
        				<td class="transparent"><a href="javascript:maxResource('metal');">все</a></th>
        				<td class="transparent"><input name="metal" size="10" onchange="calculateCapacity();" type="text"></td>
        			</tr>
                    <tr style="height:20px;">
        				<td class="transparent">Моркофь</td>
        				<td class="transparent"><a href="javascript:maxResource('crystal');">все</a></th>
        				<td class="transparent"><input name="crystal" size="10" onchange="calculateCapacity();" type="text"></td>
        			</tr>
                    <tr style="height:20px;">
        				<td class="transparent">Огурец</td>
        				<td class="transparent"><a href="javascript:maxResource('deuterium');">все</a></td>
        				<td class="transparent"><input name="deuterium" size="10" onchange="calculateCapacity();" type="text"></td>
        			</tr>
				</table>
			</td>
		</tr>
		        <tr style="height:20px;">
        	<td colspan="2"><input class="submit" value="Дальше" type="submit"></input></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
data	= {"fleetroom":"5460000000","consumption":"4"};
</script>
</div>

Как правильно добавить обработчик (и вожможно ли такое) так чтоб при нажатии кнопки "Дальше" На сервер отправлялась информация не раз, а три раза с интервалом в одну секунду (с задержкой)!


Автор: Мизар (не зарегистрирован), дата: 10 июля, 2015 - 17:30
#permalink

Или скажу по проще:
Можна продублировать как-то отправку формы, от нажатия только одногораза на кнопку!?


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
18 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum