Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Топ:
Теоретическая значимость работы: Описание теоретической значимости (ценности) результатов исследования должно присутствовать во введении...
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного...
Интересное:
Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Берегоукрепление оползневых склонов: На прибрежных склонах основной причиной развития оползневых процессов является подмыв водами рек естественных склонов...
Дисциплины:
2019-08-07 | 171 |
5.00
из
|
Заказать работу |
|
|
Методы addEventListener и removeEventListener являются современным способом назначить или удалить обработчик, и при этом позволяют использовать сколько угодно любых обработчиков.
Назначение обработчика осуществляется вызовом addEventListener с тремя аргументами:
element.addEventListener(event, handler[, phase]);
· event — Имя события, например click
· handler — Ссылка на функцию, которую надо поставить обработчиком.
· phase — Необязательный аргумент, «фаза», на которой обработчик должен сработать. Этот аргумент редко нужен.
Удаление обработчика осуществляется вызовом removeEventListener:
// передать те же аргументы, что были у addEventListener
element.removeEventListener(event, handler[, phase]);
Удаление требует именно ту же функцию которая была назначена.
Вот так removeEventListener не сработает:
elem.addEventListener("click", function() {alert('Спасибо!')});
elem.removeEventListener("click", function() {alert('Спасибо!')});
В removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.
Вот так правильно:
function handler() {
alert('Спасибо!');
}
input.addEventListener("click", handler);
input.removeEventListener("click", handler);
Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:
<input id="elem" type="button" value="Нажми меня"/>
<script>
function handler1() {
alert('Спасибо!');
};
function handler2() {
alert('Спасибо ещё раз!');
}
elem.onclick = function() { alert("Привет"); };
elem.addEventListener("click", handler1); // Спасибо!
elem.addEventListener("click", handler2); // Спасибо ещё раз!
</script>
Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener. Однако, во избежание путаницы, рекомендуется выбрать один способ.
AddEventListener работает всегда, а DOM-свойство – нет
У специальных методов есть ещё одно преимущество перед DOM-свойствами.
|
Есть некоторые события, которые нельзя назначить через DOM-свойство, но можно через addEventListener.
Например, таково событие transitionend, то есть окончание CSS-анимации. В большинстве браузеров оно требует назначения через addEventListener.
Итого по назначению событий
Есть три способа назначения обработчиков событий:
1. Атрибут HTML: onclick="...".
2. Свойство: elem.onclick = function.
3. Специальный метод: elem.addEventListener(событие, handler[, phase]), удаление через removeEventListener.
Объект события
Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.
Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.
Свойства объекта события
Пример ниже демонстрирует использование объекта события:
<input type="button" value="Нажми меня" id="elem">
<script>
elem.onclick = function(event) {
alert(event.type + " на " + event.currentTarget); // вывести тип события и элемент
alert(event.clientX + ":" + event.clientY); // вывести координаты клика
}
</script>
Есть также и ряд других свойств, в зависимости от событий. Посмотреть весь перечень свойств объекта события можно написав следующий код:
<button id="btn">Кнопка</button>
<script>
let btn = document.getElementById('btn')
btn.onclick = function (event) {
console.log(event);
console.dir(event);
}
</script>
Объект события доступен и в HTML
При назначении обработчика в HTML, тоже можно использовать переменную event, это будет работать кросс-браузерно:
<input type="button" onclick="alert(event.type)" value="Тип события">
Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) { alert(event.type) }. То есть, её первый аргумент называется "event".
Особенности IE8-
IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.
Работает это так:
elem.onclick = function() {
// window.event - объект события
|
alert(window.event.clientX);
};
Кроссбраузерное решение
Универсальное решение для получения объекта события:
element.onclick = function(event) {
event = event || window.event; // (*)
};
Строка (*), в случае, если функция не получила event (IE8-), использует window.event.-событие event.
Итого по объекту события
Объект события содержит ценную информацию о деталях события.
Он передается первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event.
|
|
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...
Типы сооружений для обработки осадков: Септиками называются сооружения, в которых одновременно происходят осветление сточной жидкости...
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!