Addeventlistener javascript описание. JavaScript - Способы подписки на события. Базовое использование метода

У вас есть следующий прослушиватель для клавиатуры ArrowDown event (it key code is 40):

Window.onload = function() { var itemsContainer = document.getElementById("cities-drop"); document.addEventListener("*****",function(event){ if (event.keyCode == 40 && itemsContainer.style.display=="block") { event.preventDefault(); for (var i=0;i

в этом случае hovering переходит к последнему элементу в списке, после нажатия ArrowDown .

В случае, если break раскоментирован, он переходит ко второму элементу и больше не прыгает.

Невозможно получить принцип, как это сделать, что слушатель всегда слушает...

ИЗМЕНИТЬ живая демонстрация возможно, это вопрос закрытия, но я не уверен, что

3 ответа

Посмотрев на свой код и понимая, что вы пытаетесь сделать, я думаю, что ваша ошибка использует substr , где вы должны использовать indexOf . Вот обновленная строка:

If (itemsContainer.getAttribute("class").indexOf("hovered") != -1) Подробнее: Фактически вы использовали substr со строковым значением для индекса start . Не уверен, каков был бы результат этого, но, по-видимому, это не -1, поскольку условие возвращалось true каждый раз, заставляя следующий элемент зависеть КАЖДОЕ время, вплоть до нижней части списка. С помощью инструкции break в ней выполнялся оператор if в первом элементе (заставляя второй элемент "зависать"), а затем завершался.

Я оставил бы инструкцию break там, после исправления вашего кода, так что цикл остановится после того, как он найдет его совпадение, и не будет излишне перебирать остальные элементы.

EDIT:

Я нашел еще пару проблем в коде. Вот пример, который работает для меня в IE и FF, по крайней мере (не тестировался в Safari, Opera или Chrome):

Подробно: Для меня в IE9 функция никогда не вызывалась. Вместо этого я просто сделал его регулярной функцией и добавил событие onkeydown в тег body .

В вашем if-statement у вас есть itemsContainer.getAttribute("class") . Во-первых, вам нужно использовать itemsContainer.children[i] . Во-вторых, .getAttribute("class") не работал у меня в IE, поэтому я переключил его только на.className .

Наконец, itemsContainer.children[i].nextSibling не работал у меня, но он достаточно прост, чтобы просто изменить его на itemsContainer.children , чтобы получить следующего брата.

Вместо использования цикла вы можете попробовать более простой подход:

Window.onload = function() { var itemsContainer = document.getElementById("cities-drop"); document.addEventListener("*****",function(event) { if (event.keyCode == 40 && itemsContainer.style.display=="block") { event.preventDefault(); var previousHoveredChoice = itemsContainer.querySelector(".hovered"); previousHoveredChoice.className = ""; var currentHoveredChoice = previousHoveredChoice.nextSibling; if (currentHoveredChoice) { currentHoveredChoice.className = "hovered"; } } }); //following code is copy-pasted from the live example //just to close the onload function handler in this solution document.addEventListener("*****",function(event){ if (event.keyCode == 27) { if (document.getElementById("cities-drop").style.display=="block"){ document.getElementById("cities-drop").style.display="none"; } } }); //end of copy-pasted code };

Есть несколько вещей, которые я вижу, что может быть проблемой. Прежде всего, вы обновляете itemsContainer.children[i].nextSibling , который равен itemsContainer.children . Поэтому всегда выбирается последний элемент, если вы пропустите перерыв. itemsComtainer всегда будет зависать, если есть элемент, соответствующий классу.

Вторая проблема - это то, что Travesty3 указывает на его ответ.

Я также изменил условие if, чтобы проверить, находится ли зависавший класс на одном из дочерних элементов, а не на самом контейнере.

If (itemsContainer.children[i].getAttribute("class").match("hovered"))

Я изменил обработчик событий со следующими строками кода, и это, кажется, отлично работает:

Document.addEventListener("*****",function(event){ if (event.keyCode === 40 && itemsContainer.style.display==="block") { event.preventDefault(); for (var i=0,l=itemsContainer.children.length;i

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

Если пользовательский опыт важен, я бы рекомендовал использовать для этого фреймворк и плагин. Я лично предпочитаю jquery и jquery ui, и есть несколько плагинов для выбора drop downs. Еще одно преимущество заключается в том, что если javascript отключен клиентом или ваш javascript будет ошибочным по какой-то причине, большинство плагинов возвращаются к обычному собственному элементу select, который все равно будет работать нормально.

Я сам использовал этот плагин для selectbox для простого выпадающего списка: http://www.abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

Изменить: Я отменяю эту рекомендацию, так как она не работает, если несколько элементов имеют одинаковое имя. Если это важно, вы должны проверить плагин Filament Group selectmenu: http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ //Изменить

И плагин автозаполнения jquery для combobox, также поддерживающий письменный ввод: http://jqueryui.com/demos/autocomplete/

Приложить событие щелчка на элемента. Когда пользователь нажимает на кнопку, выход "Hello World" в

Элемент с идентификатором = «демо»:

document.getElementById("demo").innerHTML = "Hello World";
});

Попробуй сам "

Больше "Try it Yourself" примеры ниже.

Определение и использование

addEventListener() метод придает обработчик события для указанного элемента.

пример

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

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

Document.getElementById("myBtn").addEventListener("click", myFunction);

Попробуй сам "
пример

Вы можете добавлять события различных типов к одному элементу.

Этот пример показывает, как добавить много событий на одной и той же элемента:

Document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

Попробуй сам "
пример

При передаче значений параметров используйте "anonymous function" , которая вызывает указанную функцию с параметрами:

Document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});

Попробуй сам "
пример

Изменение цвета фона элемента:

Document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";

Для , чтобы добавить событие щелчка. Когда пользователь нажимает на кнопку ID = "демо" элемента выходной элемент "Hello World":

. Document.getElementById ("демо") innerHTML = "Hello World";
});

Попробуйте » Определение и использование

Метод addEventListener () используется для добавления обработчика событий для заданного элемента.

примеров

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

Этот пример демонстрирует, как добавить два события щелчка в элементе :

Document.getElementById ("myBtn") addEventListener ("щелчок", MYFUNCTION);

Попробуйте »
примеров

Вы можете добавить различные типы событий в одном элементе.

Этот пример показывает, как добавить несколько событий с элементом :

Document.getElementById ("myBtn") addEventListener ("MouseOver", MYFUNCTION);
. Document.getElementById ("myBtn") addEventListener ("щелчок", someOtherFunction);
. Document.getElementById ("myBtn") addEventListener ("MouseOut", someOtherFunction);

Попробуйте »
примеров

При передаче значения параметра, используйте вызов функции с параметрами "анонимной функции":

document.getElementById ("myBtn"). addEventListener ("щелчок", функция () {
туРипсЫоп (p1, p2);
});

Попробуйте »
примеров

Изменить элементы Справочная информация:

document.getElementById ("myBtn"). addEventListener ("щелчок", функция () {
this.style.backgroundColor = "красный";
});

Попробуйте »
примеров

Используйте дополнительные параметры для демонстрации различных useCapture бурлит и захвата фаз:

Document.getElementById ("myDiv") addEventListener ("щелчок", туРипсЫоп, правда);

Описание

Метод addEventListener() регистрирует обработчик события для целевого объекта (eventTarget), для которого он будет вызываться при возникновении события. Целевым объектом может быть объект Element, Document, Window или любой другой объект поддерживающий события, например, такой как XMLHttpRequest.

Синтаксис eventTarget.addEventListener(тип_события, обработчик, фаза); Аргументы

• тип_события: строка, указывающая тип события для которого регистрируется обработчик. Тип события указывается без префикса "on".
• обработчик: функция выражение или имя функции, которая должна вызываться при возникновении события, указанного типа.
• фаза: булево значение, которое определяет, для какой фазы распространения события будет зарегистрирован обработчик. Возможные значения:
  • true - регистрирует обработчик события для фазы перехвата.
  • false - регистрирует обработчик события для фазы всплытия.

Возвращаемое значение

• Нет .

Примечание: метод addEventListener() можно вызвать более одного раза и зарегистрировать с его помощью несколько разных обработчиков событий для одного и того же типа события в том же самом целевом объекте. При возникновении события в объекте будут вызваны все обработчики, зарегистрированные для указанного типа события, в порядке их регистрации. var div = document.getElementById("one"); div.addEventListener("click", foo1, false); div.addEventListener("click", foo2, false); div.addEventListener("click", foo3, false); function foo1() { alert("1"); } function foo2() { alert("2"); } function foo3() { alert("3"); } Попробовать »

Пример Название документа #one { background-color: #99c2ff; height: 150px; width: 150px; } var div = document.getElementById("one"); div.addEventListener("click", foo, false); function foo() { alert("Hi!"); }

В этой статье мы рассмотрим различные способы, с помощью которых Вы можете подписаться на события элементов веб-страницы. Один из способов основан на использовании атрибутов HTML, два других способа осуществляются через код JavaScript посредством свойства on или метода addEventListener() .

Как подписаться на событие?

• Подписаться через код HTML (не рекомендуется использовать).
• Через код JavaScript с помощью задания элементу свойства on[событие] , где [событие] - это имя определённого события.
• Через код JavaScript с помощью специального метода addEventListener .

Подписка на событие через код HTML

Данный способ основывается на использовании атрибута, который имеет вид on[событие] , где [событие] - это имя определённого события.

Основные действия: добавить к элементу определённый атрибут (например: onclick - где: on означает событие, а click - вид события) со значением, содержащим оператор или функцию. Данный оператор или функция будет выполняться при наступлении этого события у элемента.

Например, добавить к кнопке событие click , при наступлении которого будет выводиться сообщение с помощью метода alert:

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

Например, выполним вышеприведённый пример с использованием функции:

//функция, которая будет вызываться при наступлении события click у указанного элемента function myFunction() { alert("Событие click"); }

Например, добавить к кнопке событие click , при наступлении которого выполняется указанная функция:

//функция, которая будет вызываться при наступлении события click у указанного элемента function countElements() { var count = document.getElementsByTagName("*").length; alert("Количество элементов на странице:" + count.toString()); }

Данный вариант подписки на событие использовать не рекомендуется, т.к. он не только загромождает код HTML, но и имеет ограничения связанные с использованием объекта event , ключевого слово this и др.

Этот способ подписки на событие осуществляется через код JavaScript с помощью задания элементу свойства on[событие] . Основной принцип данного метода заключается в следующем:

Найти элемент (объект) в DOM-дереве, на событие которого Вы хотите подписаться.

Добавить найденному объекту свойство, которое должно иметь следующий вид:
on[событие] , где [событие] - это имя определённого события.
После этого необходимо данному свойству присвоить обработчик, т.е. безымянную или некоторую указанную функцию, которая будет выполняться при наступлении этого события.

//в качестве обработчика события будем использовать безымянную функцию: document.getElementById("myID").onclick = function { alert("Событие click"); }

Например, добавить к кнопке, имеющей id="myButton" событие click , при наступлении которого выполняется указанная функция:

//Найти элемент на событие, которого Вы хотите подписаться var myButton = document.getElementById("myButton"); //добавить к объекту свойство, имеющее имя on[событие] //при наступлении события click выполняется функция myFunction myButton.onclick = myFunction; //функция myFunction function myFunction() { //код функции //... }

Если событие задаётся через атрибут, то браузер, читая код HTML, создаёт соответствующее свойство автоматически. Т.е. браузер работает с событиями только с помощью соответствующих свойств объекта (элемента).

Если Вы подпишитесь на событие различными способами, т.е. через атрибут и с помощью свойства, то браузер в этом случае будет использовать только вариант реализации события, выполненный с помощью свойства. Подписываться на события лучше только с помощью соответствующих свойств объекта (элемента), использовать атрибуты для этих целей не рекомендуется.

Подписка на событие через код JavaScript с помощью метода addEventListener

Этот способ подписки на событие осуществляется через код JavaScript с помощью специального метода addEventListener . Данный способ подписки является наиболее предпочтительным и рекомендуется стандартом.

Метод addEventListener , предназначен для добавления прослушивателя (listener) определённого события (event) к элементу и выполнения обработчика (callback) при его наступлении. Кроме метода addEventListener есть ещё один метод removeEventListener , который предназначен для выполнения обратного действия, т.е. для удаления прослушивателя.

Синтаксис методов addEventListener и removeEventListener:

Element.addEventListener(event, callback, phase); element.removeEventListener(event, callback, phase);

Метод addEventListener имеет 3 параметра:

• event (обязательный) - имя события, на которое Вы хотите подписаться (прослушивать);
• callback (обязательный) - функция (анонимная или именованная), которая будет выполнять обработку события;
• phase (не обязательный) - этап, на котором будет перехватываться событие. Данный параметр принимает 2 значения: true (на этапе погружения (перехвата) события) и false (на этапе всплытия события). Если данный параметр не указать, то будет использоваться значение false .

Например, использование анонимной функции для обработки события " click ":

Element.addEventListener("click", function { //... });

Например, использование функции myFunction() для обработки события " click ":

Element.addEventListener("click", myFunction); //функция myFunction function myFunction() { //... }

Обработчик события, который Вы добавили с помощью метода addEventListener() можно при необходимости удалить с помощью метода removeEventListener() . Удалить обработчик события можно только в том случае, если он в методе addEventListener() задан в виде именованной функции. Если Вы задали обработчик в виде анонимной функции в методе addEventListener() , то его удалить с помощью метода removeEventListener() не получится.

Например, добавить, а затем удалить обработчик myFunction для события mousemove объекта document:

//добавить для события mousemove объекта document обработчик, заданный в виде функции myFunction document.addEventListener("mousemove",myFunction); //удалить у события mousemove объекта document обработчик, заданный в виде функции myFunction document.removeEventListener("mousemove", myFunction);

Document.addEventListener("click",myFunction); function myFunction() { alert("I LOVE JAVASCRIPT!"); }

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

Document.addEventListener("click",myFunction1); document.addEventListener("click",myFunction2);

Например, добавить объекту document обработчики для следующих событий: click , mouseover , mouseout .

Document.addEventListener("mouseover",myFunction1); document.addEventListener("click",myFunction2); document.addEventListener("mouseout",myFunction3);

Например, для передачи обработчику значений параметров, будем использовать анонимную функцию. В этой анонимной функции будем использовать ещё одну функцию (именованную) с помощью которой и будем передавать необходимые параметры:

Document.addEventListener("click",function() { myFunction(parameter1, parameter2); });

Например, при наступлении события click в документе, изменить цвет фона элемента body . Обработчик события выполнить в виде анонимной функции.

Document.addEventListner("click",function() { document.body.style.backgroundColor = green; });

Как правильно работать с событиями

Работать в JavaScript с документом HTML (DOM-деревом) и обрабатывать события необходимо только после того страница полностью загрузится:

//когда вся страница загрузилась, вызываем нашу функцию pageInit window.addEventListener("load", pageInit); //функция pageInit() function pageInit() { //подписываемся на события }

Window.addEventListener("load", function() { //подписываемся на события }

Более правильно работать не с событием load (происходит после полной загрузки страницы), а с событием DOMContentLoaded , которое происходит после того как браузер загрузил документ HTML и построил DOM-дерево. Т.е. для того чтобы работать с DOM-деревом нет необходимости ждать пока загрузятся все ресурсы HTML-страницы достаточно чтобы браузер построил дерево DOM.

//HTML документ загрузился и дерево DOM построено document.addEventListener("DOMContentLoaded", pageInit); //функция pageInit() function pageInit() { //подписываемся на события }

Вышеприведенный код можно записать более кратко, с помощью анонимной функции:

Document.addEventListener("DOMContentLoaded", function() { //подписываемся на события }

Одновременно подписать на событие сразу несколько объектов

Например, подписать на событие click сразу все элементы p. Обработку события выполнять с помощью функции myFunction():

Document.addEventListener("DOMContentLoaded", function() { var elementsP = document.getElementsByTagName("P"); for (var i=0; i < elementsP.length, i++) { elementsP[i].addEventListener("click", myFunction); } } //функция myFunction() function myFunction() { //... }