Javascript урок 8. часть 2. объектная модель документа (javascript dom) и события
Содержание:
- Распространение
- Координаты в окне: clientX/Y
- Серия удачных событий
- Движение мыши
- JavaScript onclick
- Действие браузера по умолчанию
- Выносим код события onclick в javascript-функцию
- Последовательность выполнения скриптов
- Подписка на событие через addEventListener
- Обработка событий на нескольких DOM элементах
- Все способы jQuery .click() с примерами
- Примечания
- Обработчик события в виде безымянной функции
- Инсайт от автора
- События прокрутки
- Click в jQuery с использованием -> класса(class)
Распространение
Обработчики событий (например, JavaScript touch events), зарегистрированные для родительских узлов, также будут принимать события, которые происходят в дочерних элементах. Если была нажата кнопка, находящаяся внутри абзаца, обработчики событий абзаца также получат событие click.
Событие распространяется от узла, в котором оно произошло, в родительский узел и в корень документа. После того, как все обработчики, зарегистрированные в конкретном узле, вступили в действие по очереди, возможность реагировать на событие получают обработчики, зарегистрированные для всего окна.
В любой момент обработчик события может вызвать для объекта события метод stopPropagation, чтобы предотвратить распространение события дальше. Это может быть полезно, когда у вас есть кнопка внутри другого интерактивного элемента, и вы не хотите, чтобы при нажатии кнопки активировалось поведение, заданное для клика мышью по внешним элементам.
В следующем примере мы регистрируем обработчики «MouseDown» как для кнопки, так и для абзаца. При клике правой клавишей (JavaScript mouse events) обработчик вызывает метод stopPropagation, который предотвращает запуск обработчика абзаца. При нажатии на кнопку другой клавишей мыши запускаются оба обработчика:
<p>Абзац и в нем <button>кнопка</button>.</p>
<script>
var para = document.querySelector("p");
var button = document.querySelector("button");
para.addEventListener("mousedown", function() {
console.log("Handler for paragraph.");
});
button.addEventListener("mousedown", function(event) {
console.log("Handler for button.");
if (event.which == 3)
event.stopPropagation();
});
</script>
Большинство объектов событий имеют свойство target, которое указывает на узел, в котором они возникли. Вы можете использовать это свойство, чтобы случайно не обрабатывать какое-то событие, которое распространяется вверх из узла.
Также можно использовать JavaScript event target, чтобы расширить диапазон события определенного типа. Например, если у вас есть узел, содержащий длинный список кнопок, более удобно зарегистрировать один обработчик клика для внешнего узла и использовать свойство target, чтобы отслеживать, была ли нажата кнопка, а не регистрировать экземпляры обработчика для всех кнопок:
<button>A</button>
<button>B</button>
<button>C</button>
<script>
document.body.addEventListener("click", function(event) {
if (event.target.nodeName == "BUTTON")
console.log("Clicked", event.target.textContent);
});
</script>
Координаты в окне: clientX/Y
Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.
Пара свойств содержит координаты курсора относительно текущего окна.
При этом, например, если ваше окно размером 500×500, а мышь находится в центре, тогда и и будут равны 250.
Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора не изменятся, потому что они считаются относительно окна, а не документа.
Проведите мышью над полем ввода, чтобы увидеть :
В той же системе координат работает и метод , возвращающий координаты элемента, а также .
Координаты курсора относительно документа находятся в свойствах .
Так как эти координаты – относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора изменятся на величину прокрутки, они привязаны к конкретной точке в документе.
В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.
Проведите мышью над полем ввода, чтобы увидеть (кроме IE8-):
В той же системе координат работает , если элемент позиционируется относительно документа.
Устарели:
Некоторые браузеры поддерживают свойства , .
Эти свойства устарели, они нестандартные и не добавляют ничего к описанным выше. Использовать их не стоит.
Серия удачных событий
При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлёту.
В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:
- Пользователь кликает мышью или наводит курсор на определённый элемент.
- Пользователь нажимает клавишу на клавиатуре.
- Пользователь изменяет размер или закрывает окно браузера.
- Завершение загрузки веб-страницы.
- Отправка данных через формы.
- Воспроизведение видео, пауза или завершение воспроизведения.
- Произошла ошибка.
Подробнее о событиях можно посмотреть в Справочнике по событиям.
Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий
Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе
Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.
Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер. Рассмотрим простой пример
Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка , при нажатии которой цвет фона изменяется случайным образом:
Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка , при нажатии которой цвет фона изменяется случайным образом:
JavaScript выглядит так:
В этом коде мы сохраняем ссылку на кнопку внутри переменной типа , используя функцию . Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — . Переменная указывает на элемент — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента .
Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент — всякий раз, когда пользователь щёлкает по нему.
Пример вывода выглядит следующим образом:
События, как понятие, относятся не только к JavaScript — большинство языков программирования имеют модель событий, способ работы которой часто отличается от модели в JavaScript. Фактически, даже модель событий в JavaScript для веб-страниц отличается от модели событий для просто JavaScript, поскольку используются они в разных средах.
Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют обработчики, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция для регистрации обработчиков событий, и функция для регистрации обработчика событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий .
Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства обработчиков событий пишутся в так называемом регистре CamelCase (например, , а не ) и должны сочетаться с функцией . См. для примера.
На данном этапе обучения вам не нужно особо разбираться в различных средах программирования, однако важно понимать, что принцип работы событий в них отличается
Движение мыши
Каждый раз, когда перемещается курсов мыши, срабатывает событие «mousemove» из набора JavaScript mouse events. Оно может быть использовано для отслеживания положения мыши. Это применяется при реализации возможности перетаскивания элементов мышью.
В следующем примере программа выводит на экран панель и устанавливает обработчики событий таким образом, что при перетаскивании эта панель становится уже или шире:
<p>Потяните за край панели, чтобы изменить ее ширину:</p>
<div style="background: orange; width: 60px; height: 20px">
</div>
<script>
var lastX; // Отслеживает последнюю позицию X мыши
var rect = document.querySelector("div");
rect.addEventListener("mousedown", function(event) {
if (event.which == 1) {
lastX = event.pageX;
addEventListener("mousemove", moved);
event.preventDefault(); // Предотвращает выделение
}
});
function buttonPressed(event) {
if (event.buttons == null)
return event.which != 0;
else
return event.buttons != 0;
}
function moved(event) {
if (!buttonPressed(event)) {
removeEventListener("mousemove", moved);
} else {
var dist = event.pageX - lastX;
var newWidth = Math.max(10, rect.offsetWidth + dist);
rect.style.width = newWidth + "px";
lastX = event.pageX;
}
}
</script>
Обратите внимание, что обработчик «mousemove» зарегистрирован для всего окна. Даже если во время изменения размеров мышь выходит за пределы панели, мы все равно обновляем ширину панели и прекращаем JavaScript touch events, когда клавиша мыши была отпущена
Мы должны прекратить изменение размера панели, когда пользователь отпускает клавишу мыши. К сожалению, не все браузеры устанавливают для событий «mousemove» свойство which. Существует стандартное свойство buttons, которое предоставляет аналогичную информацию, но оно также поддерживается не во всех браузерах. К счастью, все основные браузеры поддерживают что-то одно: либо buttons, либо which. Функция buttonPressed в приведенном выше примере сначала пытается использовать свойство buttons, и, если оно не доступно, переходит к which.
Когда курсор мыши наводится или покидает узел, запускаются события «mouseover» или «mouseout«. Они могут использоваться для создания эффектов при наведении курсора мыши, вывода какой-нибудь подписи или изменения стиля элемента.
Чтобы создать такой эффект, недостаточно просто начать его отображение при возникновении события «mouseover» и завершить после события «mouseout«. Когда мышь перемещается от узла к одному из его дочерних элементов, для родительского узла происходит событие «mouseout«. Хотя указатель мыши не покинул диапазон распространения узла.
Что еще хуже, эти JavaScript event распространяются так же, как и другие события. Когда мышь покидает один из дочерних узлов, для которого зарегистрирован обработчик, возникнет событие «mouseout«.
Чтобы обойти эту проблему, можно использовать свойство объекта события relatedTarget. В случае возникновения события «mouseover» оно указывает, на какой элемент был наведен курсор мыши до этого. А в случае возникновения «mouseout» — к какому элементу перемещается указатель. Мы будем изменять эффект наведения мыши только, когда relatedTarget находится вне нашего целевого узла.
В этом случае мы изменяем поведение, потому что курсор мыши был наведен на узел из-за его пределов (или наоборот):
<p>Наведите курсор мыши на этот <strong>абзац</strong>.</p>
<script>
var para = document.querySelector("p");
function isInside(node, target) {
for (; node != null; node = node.parentNode)
if (node == target) return true;
}
para.addEventListener("mouseover", function(event) {
if (!isInside(event.relatedTarget, para))
para.style.color = "red";
});
para.addEventListener("mouseout", function(event) {
if (!isInside(event.relatedTarget, para))
para.style.color = "";
});
</script>
Функция isInside отслеживает родительские связи заданного узла или пока не будет достигнута верхняя часть документа (когда node равен нулю). Либо не будет найден родительский элемент, который нам нужен.
Эффект наведения гораздо проще создать с помощью псевдоселектора CSS :hover, как показано в следующем примере. Но когда эффект наведения предполагает что-то более сложное, чем просто изменение стиля целевого узла, тогда нужно использовать прием с использованием событий «mouseover» и «mouseout» (JavaScript mouse events):
<style>
p:hover { color: red }
</style>
<p>Наведите курсор мыши на этот <strong>абзац</strong>.</p>
JavaScript onclick
The JavaScript onclick event executes a function when you click on a button or another web element. For instance, an onclick event can trigger a dialog box to appear when you clock on a button.
Here is the syntax for the onclick method in HTML:
<button onclick="codetorun">Click me</button>
When this HTML button is clicked, the “codetorun” JavaScript function will execute. We can use onclick with other elements, like a div. onclick is not exclusive to buttons.
You can also use onclick in plain JavaScript. Here is an example of a JavaScript onclick method:
var item = document.getElementById("button");
item.onclick = function() {
codetoexecute...
}
We use the JavaScript getElementById method to retrieve an element from our web page. When we click on the element with the ID “button” our onclick function will execute.
Действие браузера по умолчанию
Браузер имеет своё собственное поведение по умолчанию для различных событий.
В ряде случаев реакцию браузера на событие можно убрать в обработчике.Для этого у IE и W3C есть, как и раньше, два по сути близких, но по виду разных способа:
element.onclick = function(event) {
event = event || window.event
if (event.preventDefault) {
// Вариант стандарта W3C:
event.preventDefault()
} else {
// Вариант Internet Explorer:
event.returnValue = false
}
}
Вместо можно записать одну строчку:
.. event.preventDefault ? event.preventDefault() : (event.returnValue=false) ...
Некоторые поведения по умолчанию происходят до вызова обработчика события. В этом случае их, конечно же, отменить нельзя.
Например, при фокусировке на ссылке — браузер выделяет ее пунктирной рамочкой.
Это действие выполняется до события , поэтому отменить выделение в обработчике нельзя.
При клике перехода не произойдет, а рамка вокруг ссылки появится.
Код примера:
var a = document.getElementById('my-focus-a')
a.onfocus = a.onclick = function(e) {
e = e || window.event
// другая кроссбраузерная запись остановки события
e.preventDefault ? e.preventDefault() : (e.returnValue=false)
}
Выносим код события onclick в javascript-функцию
Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:
<script>
function ChangeColor(Element) {
if (Element.style.color == 'green') Element.style.color = 'red';
else Element.style.color = 'green';
return false;
}
</script>
<a href="#" style="color: green;" onclick="return ChangeColor(this);">Изменить цвет</a>
Код в действии:
Нажмите на ссылку:
Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле — меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».
Последовательность выполнения скриптов
Запустить выполнение скрипта могут разные факторы: считывание тега , возникновение события. Метод requestAnimationFrame, задает вызов функции, перед тем как будет заново построена следующая страница. Это еще один способ, с помощью которого могут запускаться скрипты.
События JavaScript select events и все остальные могут запускаться в любой момент, но в одном документе два скрипта никогда не запустятся одновременно. Если скрипт уже выполняется, обработчикам событий и фрагментам кода, запланированным другим скриптом, придется подождать своей очереди. Именно по этой причине документ замирает, когда скрипт работает в течение длительного времени. Браузер не реагирует на клики и другие события, поскольку не может запустить обработчики событий, пока текущий скрипт не закончит работу.
Некоторые среды программирования позволяют создавать несколько потоков исполнения, которые запускаются одновременно. Обеспечив возможность выполнять одновременно несколько задач, можно повысить скорость выполнения программы. Но когда у нас есть несколько действий, которые затрагивают те же части системы одновременно, программе становится сложнее выполнять их.
Если нужно запустить процессы в фоновом режиме без замораживания страницы, браузеры предоставляют нам то, что называется web workers. Это изолированная среда JavaScript, которая работает с документом вместе с основной программой и может общаться с ним только путем отправки и получения сообщений.
Предположим, что в файле с именем code/squareworker.js у нас есть следующий код:
addEventListener("сообщение", function(event) {
postMessage(event.data * event.data);
});
Представьте себе, что возводимое в квадрат число является очень большим, затягивающим вычисление, и нужно выполнить вычисления в фоновом потоке. Этот код запускает web workers, посылает ему несколько сообщений и выводит ответы:
var squareWorker = new Worker("code/squareworker.js");
squareWorker.addEventListener("message", function(event) {
console.log("The worker responded:", event.data);
});
squareWorker.postMessage(10);
squareWorker.postMessage(24);
Функция postMessage отправляет сообщение, которое инициирует возникновение в приемнике события «message«. Скрипт, который создал web workers, отправляет и получает сообщения через объект Worker. С помощью этого объекта среда взаимодействуют с создавшим ее скриптом, посылая информацию и прослушивая его в своем глобальном с оригинальным скриптом.
Подписка на событие через addEventListener
Ещё один способ назначить событию обработчик — это использовать метод .
Синтаксис :
// $element - объект или DOM-элемент к которому нужно добавить обработчик $element.addEventListener(event, handler);
Параметры:
- — имя события (например, );
- — функция, которая будет вызвана при возникновении этого события;;
- (не обязательный) — объект, в котором можно задать дополнительные параметры.
В можно задать:
- — если , то обработчик будет вызван всего один раз;
- — задаёт фазу, на которой нужно вызвать обработчик события (по умолчанию — на этапе всплытия); если нужно на этапе погружения (перехвата) — то этому ключу следует установить значение ;
- — определяет следует ли вызывать ; если установить — то обработчик никогда не вызовет этот метод.
Кроме этого, можно установить или , в этом случае он будет просто определять фазу (всплытие или погружение).
Пример:
function changeBgColor() {
document.body.style.backgroundColor = '#3f51b5';
}
document.addEventListener('click', changeBgColor, false);
В этом примере прикреплен к объекту . Когда событие возникнет на этом элементе, будет вызвана функция .
Если мы откроем документ, содержащий этот код в браузере, то сначала увидим пустую страницу.
Однако при клике фон страницы изменится с белого на .
Иногда возникают ситуации, когда нужно удалить обработчик. Это можно выполнить, используя :
$element.removeEventListener(event, handler);
Этот метод принимает аргументы тех же типов, что .
При этом для того, чтобы удалить обработчик нам нужно указать точно такие же аргументы, которые мы использовали при его назначении.
function changeBgColor() {
document.body.style.backgroundColor = '#3f51b5';
}
document.addEventListener('click', changeBgColor, false);
document.removeEventListener('click', changeBgColor, false);
Если обработчик — анонимная функция, то её удалить нельзя.
document.addEventListener('click', function() {
document.body.style.backgroundColor = '#3f51b5';
});
// удалить обработчик установленный выше с помощью addEventListener не получится, т.к. это разные функции, имеющие одинаковый код
document.removeEventListener('click', function() {
document.body.style.backgroundColor = '#3f51b5';
});
Как добавить несколько обработчиков к событию?
Метод в отличие от предыдущих способов позволяет назначить одному событию несколько обработчиков:
function handler1() { ... }
function handler2() { ... }
document.addEventListener('click', handler1);
document.addEventListener('click', handler2);
Как правильно прикрепить обработчики к элементам?
Для прикрепления обработчиков к элементам, необходимо чтобы эти элементы на странице были доступны. Определить, когда они будут доступны с момента загрузки документам можно с помощью события . Данное событие возникает на когда DOM полностью построено:
document.addEventListener('DOMContentLoaded', function () {
// DOM полностью построен и доступен
...
});
Обработка событий на нескольких DOM элементах
Как использовать обработчик событий addEventListener, когда нам требуется использовать его сразу на нескольких
элементах?
Предположим, на нашей странице есть 5 кнопок с классом «btn»:
1<div class="wrapper"> 2<button class="btn">Click1<button> 3<button class="btn">Click2<button> 4<button class="btn">Click3<button> 5<button class="btn">Click4<button> 6<button class="btn">Click5<button> 7<div>
В этом случае можно использовать 2 подхода, чтобы повесить на них обработчик событий.
Подход 1. Используем отдельный addEventListener для каждой кнопки
Здесь мы можем выделить все кнопки с одинаковым классом и присвоить их переменной buttons.
Далее нам потребуется использовать цикл forEach, чтобы пробежаться по каждой кнопке в полученном списке,
и повесить на нее обработчик событий addEventListener.
1const buttons =document.querySelectorAll('.btn');
2
3functionhandleClick(){
4console.log('click');
5}
6
7buttons.forEach((button)=>{
8 button.addEventListener('click', handleClick);
9});
Подход 2. Делегирование события (Event delegation)
Здесь, основная идея заключается в том, что мы можем ловить события,
связанные с дочерними элементами (которых может быть очень много), используя единственный родительский элемент.
То есть, мы можем повесить обработчик событий на родительский div с классом «wrapper»,
и обрабатывать события, которые активируются на дочерних элементах button.
Это возможно благодаря механизму, который называется «всплытие» (bubbling) в Javascript,
который означает, что если событие срабатывает на каком-то элементе, оно также срабатывает на всех его родительских элементах.
Внутри нашей коллбэк функции у нас есть доступ к объекту «Событие» (Event), внутри которого мы можем использовать свойство target,
чтобы получить элемент, на который мы кликнули.
1const wrapper =document.querySelector('.wrapper');
2
3functionhandleClick(e){
4console.log('click', e.target);
5
6
7
8}
9
10wrapper.addEventListener('click', handleClick);
Все способы jQuery .click() с примерами
- -> id
- -> class
- -> тега
-
jQuery метод .click() — это тоже самое, что onclick на чистом js! jQuery .click() — это метод с помощью которого можно совершить клик по элементу.
Синтаксис метода click в jQuery очень простой! Пишем знак доллара $, далее открываются скобки и внутри ставится селектор ( selector ) — это id либо class. Далее присоединяем клик — это точка со словом .click со скобками и внутри располагаем действие ( script ) $( selector ).click( script ) -
Для иллюстрации работы click в jQuery с использованием id — нам понадобится какая-то кнопка button, или div, или тег ссылки(можно использовать все существующие теги..) внутри кнопки id с каким то значением:
<button id=»THE_id»>click в jQuery с использованием id</button>
Далее нам понадобится script, который обработает наше нажатие на выше приведенную кнопку. Внутри первых скобок помещаем наш id со знаком решетки THE_id:
$( «#THE_id» ).click(function() {script…
});
Внутри пишем любой скрипт. который вам требуется… мы получим текст кнопки… что-то же мы должны были сделать…
alert( $(«#THE_id»).html() );
Соберем весь код вместе:
<button id=»THE_id»>click в jQuery с использованием id</button>
<script>
$( «#THE_id» ).click(function() {
alert( $(«#THE_id»).html() );
});
</script>
Для того, чтобы увидеть действие клика в реальности нажмите на кнопку:
click в jQuery с использованием id
-
Как использовать click в jQuery если у элемента есть класс!?
Нам опять понадобится какая-то кнопка с классом(пусть будет THEclass), чтобы увидеть реальное действие click в jQuery.
<button class=»THEclass»>Кнопка button с классом THEclass</button>
Скрипт клика абсолютно аналогичный, что бы приведен выше! Но только внутри первых скобок помести класс и вместо решетки ставим точку — она, как вы знаете обозначает класс в css
И внутри помещаем тот же скрипт script, который выполнит ту же работу!
Соберем весь код клика по кнопке с классом в jQuery:
<button class=»THEclass»>Кнопка button с классом THEclass</button>
<script>
$( «.THEclass» ).click(function() {
alert( $(«.THEclass»).html() );
});
</script>
Чтобы увидеть реальный клик по элементу в jQuery нажмите кнопку ниже:
Кнопка button с классом THEclass
-
Предположим что у нас есть уникальный тег на странице и нужно сделать клик по нему!
Нам нужно создать уникальный тег, который на странице больше не повторяется, путь это будет тег rim в честь моего отца:
<rim>Текст в теге rim</rim>
Для того, чтобы скрипт понимал, что это тег, нужно лишь вставить название тега в скрипт!
Как вы уже наверное догадались, что скрипт клика по тегу отличается только содержанием внутри первых скобок!
Далее соберем весь код клика по кнопке вместе:
<rim>Текст в теге rim</rim>
<script>
$( «rim» ).click(function() {
alert($(«rim»).html());
});
</script>
Здесь текст с тегом, чтобы увидеть Click в jQuery с использованием -> тега нажмите ниже идущую текст:Текст в теге rim
Примечания
— это способ зарегистрировать обработчик события, описанный в документации W3C DOM. Вот список преимуществ его использования:
- Позволяет добавлять множество обработчиков для одного события. Это особенно полезно для DHTML библиотек или Mozilla extensions, которые должны работать в условиях использования сторонних библиотек/расширений.
- Предоставляет точный контроль фазы срабатывания(вызова) обработчика (захват или всплытие)
- Срабатывает на любом DOM элементе, а не только на HTML элементах.
Ниже описан другой, .
Если добавлен к во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.
Если зарегистрировано несколько одинаковых на одном с одинаковыми параметрами, дублирующиеся обработчики игнорируются. Так как одинаковые обработчики игнорируются, не требуется удалять их вручную с помощью метода removeEventListener.
Обычно желательно передавать элемент, на котором сработал обработчик события, например, при использовании обобщённых обработчиков для схожих элементов. При добавлении функции при помощи значение переменной меняется — заметьте, что значение передаётся в функцию от вызывающего объекта.
В примере выше значение переменной внутри при вызове событием клика равно таблице ‘t’. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:
Значение переменной внутри при вызове событием клика будет равно ссылке на глобальный (window) объект (или при использовании strict mode)
Note: В JavaScript 1.8.5 введён метод , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что вам будет необходимо иметь внешнюю ссылку на обработчик, чтобы вы могли удалить его позже.
Пример с использованием и без него:
Проблема в примере выше заключается в том, что вы не можете удалить обработчик, вызванный с . Другое решение использует специальную функцию , чтобы перехватывать любые события:
В Internet Explorer младше 9 версии, вы можете использовать вместо стандартного . Для поддержки IE, пример выше может быть модифицирован следующим образом:
У есть недостаток: будет ссылаться на объект , а не на элемент, на котором он был вызван.
Обработчик события в виде безымянной функции
Используется при назначении обработчиков событий для большого количества элементов. К имени события, как в предыдущем варианте, добавляется приставка «on». В примере ниже приведен код для элементов списка с . При клике на каждый из них цифра меняется на маркер в виде галочки. Для того чтобы назначить обработчик события, мы используем :
var li = document.querySelectorAll(«#rules li»);
for(let i = 0, len = li.length; i<len; i++){
li.onclick = function (){
this.style.listStyleImage = «url(markers/ok.png)»;
}
}
|
1 |
varli=document.querySelectorAll(«#rules li»); for(leti=,len=li.length;i<len;i++){ lii.onclick=function(){ this.style.listStyleImage=»url(markers/ok.png)»; } } |
И сам пример:
Для королевского бала необходимо:
Купить или сшить бальное платье
Сделать прическу и макияж
Научиться танцевать вальс
Выучить все правила этикета
В инспекторе свойств ( на скриншотах ниже) можно увидеть, что к каждому элементу списка добавилась кнопка с буквами (от англ. event — событие):
Если нажать на эту кнопку, то можно увидеть, какой обработчик события назначен для данного элемента и посмотреть сам код обработчика события:
Инсайт от автора
Я люблю изучать языки в жизни – я не имею ввиду языки программирования. Я говорю о языках типа русского, английского, так же я знаю украинский так как родился на Украине, ну и венгерский с немецким, это те языки, которые мне получилось выучить. Чтобы не лукавить, это те языки, на которых я могу уверенно говорить и объясниться, но, если говорить честно, хуже всего я говорю на немецком.
К чему это я?
Языки программирования имею практически такую же логику, как и обычный человеческий язык, меняется только синтаксис. Потому если ты умеешь программировать на одном каком-то языке очень хорошо, нужно просто открыть синтаксис и просто использовать его в таком ключе как сказано в документации. 100%-го успеха я не гарантирую, потому что даже в жизни в каждом языке есть свои правила, почему это работает так, а не иначе.
Потому, просто нужно трудиться, потратить большую долю времени на практику, чтобы позже делать все без особого напряга! Кипение мозга при этом неизбежно – это самое важное что нужно понимать!
JavaScriptjavascript для начинающихпрограммирование
События прокрутки
Каждый раз, когда элемент прокручивается, в нем срабатывает JavaScript scroll event. Его можно использовать для отслеживания того, что в данный момент просматривает пользователь; для отключения анимации, расположенной вне окна просмотра.
В следующем примере мы выводим индикатор прогресса в правом верхнем углу документа и обновляем его, чтобы он по частям заливался другим цветом по мере прокрутки страницы вниз:
<style>
.progress {
border: 1px solid blue;
width: 100px;
position: fixed;
top: 10px; right: 10px;
}
.progress > div {
height: 12px;
background: blue;
width: 0%;
}
body {
height: 2000px;
}
</style>
<div class="progress"><div></div></div>
<p>Scroll me...</p>
<script>
var bar = document.querySelector(".progress div");
addEventListener("scroll", function() {
var max = document.body.scrollHeight - innerHeight;
var percent = (pageYOffset / max) * 100;
bar.style.width = percent + "%";
});
</script>
Установив для элемента свойство position или fixed, мы получим тот же результат, что и при установке position:absolute. Но так мы также блокируем прокрутку элемента вместе с остальной частью документа. В результате индикатор прогресса будет статически закреплен в верхнем углу. Внутри него находится еще один элемент, размер которого изменяется в соответствии с текущим прогрессом.
В качестве единиц измерения при установке ширины мы используем %, а не рх, чтобы размеры элемента изменялись пропорционально размеру индикатора прогресса.
Глобальная переменная innerHeight содержит высоту окна, которую мы должны вычесть из общей доступной прокручиваемой высоты документа. Нельзя прокручивать окно ниже при достижении нижней части документа. С innerHeight также может использоваться innerWidth. Разделив pageYOffset (текущую позицию окна прокрутки) на максимально допустимую позицию прокрутки и умножив на 100, мы получаем процент для индикатора прогресса.
Вызов preventDefault для JavaScript scroll event не предотвращает прокрутку. Обработчик события вызывается только после того, как происходит прокручивание.
Click в jQuery с использованием -> класса(class)
click в jQuery
Нам опять понадобится какая-то кнопка с классом(пусть будет THEclass), чтобы увидеть реальное действие click в jQuery.
<button class=»THEclass»>Кнопка button с классом THEclass</button>
Скрипт клика абсолютно аналогичный, что бы приведен выше! Но только внутри первых скобок помести класс и вместо решетки ставим точку — она, как вы знаете обозначает класс в css
И внутри помещаем тот же скрипт script, который выполнит ту же работу!
Соберем весь код клика по кнопке с классом в jQuery:
<button class=»THEclass»>Кнопка button с классом THEclass</button>
<script>
$( «.THEclass» ).click(function() {
alert( $(«.THEclass»).html() );
});
</script>
