diff options
Diffstat (limited to 'files/ru/learn/javascript/building_blocks/events/index.html')
| -rw-r--r-- | files/ru/learn/javascript/building_blocks/events/index.html | 56 |
1 files changed, 28 insertions, 28 deletions
diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html index 787df877f9..2813a966d0 100644 --- a/files/ru/learn/javascript/building_blocks/events/index.html +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -58,15 +58,15 @@ original_slug: Learn/JavaScript/Building_blocks/События <p>Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка {{htmlelement ("button")}}, при нажатии которой цвет фона изменяется случайным образом:</p> -<pre class="brush: html notranslate"><button>Change color</button></pre> +<pre class="brush: html"><button>Change color</button></pre> <div class="hidden"> -<pre class="brush: css notranslate">button { margin: 10px };</pre> +<pre class="brush: css">button { margin: 10px };</pre> </div> <p>JavaScript выглядит так:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); @@ -103,7 +103,7 @@ btn.onclick = function() { <p>В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); btn.onclick = function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -114,7 +114,7 @@ btn.onclick = function() { <p>Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье <a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою функцию</a>):</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -140,10 +140,10 @@ btn.onclick = bgChange;</pre> <p>Самый ранний из введённых в сеть Web методов регистрации <em>обработчиков событий</em> базируется на <strong>HTML атрибутах </strong>(<strong>встроенные обработчики событий</strong>):</p> -<pre class="brush: html notranslate"><button onclick="bgChange()">Press me</button> +<pre class="brush: html"><button onclick="bgChange()">Press me</button> </pre> -<pre class="brush: js notranslate">function bgChange() { +<pre class="brush: js">function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; }</pre> @@ -154,7 +154,7 @@ btn.onclick = bgChange;</pre> <p>Значение атрибута — это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:</p> -<pre class="brush: html notranslate"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> +<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> <p>Для многих свойств обработчика событий существуют эквиваленты в виде атрибутов HTML. Однако, не рекомендуется их использовать — это считается плохой практикой. Использование атрибутов для регистрации обработчика событий кажется простым и быстрым методом, но такое описание обработчиков также скоро становится неудобным и неэффективным.</p> @@ -164,7 +164,7 @@ btn.onclick = bgChange;</pre> <p>Например:</p> -<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); +<pre class="brush: js">const buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = bgChange; @@ -172,7 +172,7 @@ for (var i = 0; i < buttons.length; i++) { <p class="brush: js">Обратите внимание, что для перебора всех элементов, которые содержит объект <code><a href="/en-US/docs/Web/API/NodeList">NodeList</a></code>, можно воспользоваться встроенным методом <code><a href="/en-US/docs/Web/API/NodeList/forEach">forEach()</a></code>:</p> -<pre class="brush: js notranslate">buttons.forEach(function(button) { +<pre class="brush: js">buttons.forEach(function(button) { button.onclick = bgChange; });</pre> @@ -184,7 +184,7 @@ for (var i = 0; i < buttons.length; i++) { <p>Новый тип механизма событий определён в спецификации <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a>, которая предоставляет браузеру новую функцию — <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:</p> -<pre class="brush: js notranslate">var btn = document.querySelector('button'); +<pre class="brush: js">var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -199,25 +199,25 @@ btn.addEventListener('click', bgChange);</pre> <p>Внутри функции <code>addEventListener()</code> мы указываем два параметра — имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ. Обратите внимание, что будет целесообразно поместить весь код внутри функции <code>addEventListener()</code> в анонимную функцию, например:</p> -<pre class="brush: js notranslate">btn.addEventListener('click', function() { +<pre class="brush: js">btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; });</pre> <p>Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:</p> -<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre> +<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> <p>Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.</p> <p>Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:</p> -<pre class="brush: js notranslate">myElement.onclick = functionA; +<pre class="brush: js">myElement.onclick = functionA; myElement.onclick = functionB;</pre> <p>Поскольку вторая строка будет перезаписывать значение <code>onclick</code>, установленное первой. Однако, если:</p> -<pre class="brush: js notranslate">myElement.addEventListener('click', functionA); +<pre class="brush: js">myElement.addEventListener('click', functionA); myElement.addEventListener('click', functionB);</pre> <p>Обе функции будут выполняться при щелчке элемента.</p> @@ -237,7 +237,7 @@ myElement.addEventListener('click', functionB);</pre> <p>Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя <code>removeEventListener()</code>, и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать <code>addEventListener('click', function() {...})</code> для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:</p> -<pre class="brush: js notranslate">element.onclick = function1; +<pre class="brush: js">element.onclick = function1; element.onclick = function2; etc.</pre> @@ -253,7 +253,7 @@ etc.</pre> <p>Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как <code>event</code>, <code>evt</code> или просто <code>e</code>. Называется он <strong>объектом события</strong> и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:</p> -<pre class="brush: js notranslate">function bgChange(e) { +<pre class="brush: js">function bgChange(e) { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; e.target.style.backgroundColor = rndCol; console.log(e); @@ -273,7 +273,7 @@ btn.addEventListener('click', bgChange);</pre> <p><code>e.target</code> применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как <code>e.target</code>, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>,а как он работает можно посмотреть <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">здесь</a>), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла <code>for</code> выберем каждый из них, добавив обработчик <code>onclick</code> к каждому так, чтобы случайный цвет применялся к каждому клику:</p> -<pre class="brush: js notranslate">var divs = document.querySelectorAll('div'); +<pre class="brush: js">var divs = document.querySelectorAll('div'); for (var i = 0; i < divs.length; i++) { divs[i].onclick = function(e) { @@ -286,7 +286,7 @@ for (var i = 0; i < divs.length; i++) { <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -340,7 +340,7 @@ for (var i = 0; i < divs.length; i++) { <p>Простая форма HTML, в которой требуется ввести ваше имя и фамилию:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="fname">Имя: </label> <input id="fname" type="text"> @@ -356,7 +356,7 @@ for (var i = 0; i < divs.length; i++) { <p></p></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } </pre> @@ -364,7 +364,7 @@ for (var i = 0; i < divs.length; i++) { <p>В JavaScript мы реализуем очень простую проверку внутри обработчика события <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (событие "отправить" запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:</p> -<pre class="brush: js notranslate">var form = document.querySelector('form'); +<pre class="brush: js">var form = document.querySelector('form'); var fname = document.getElementById('fname'); var lname = document.getElementById('lname'); var submit = document.getElementById('submit'); @@ -392,7 +392,7 @@ form.onsubmit = function(e) { <div class="hidden"> <h6 id="Hidden_video_example">Hidden video example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -469,7 +469,7 @@ form.onsubmit = function(e) { <p>Это довольно простой пример, который показывает и скрывает {{htmlelement ("div")}} с элементом {{htmlelement ("video")}} внутри него:</p> -<pre class="brush: html notranslate"><button>Display video</button> +<pre class="brush: html"><button>Display video</button> <div class="hidden"> <video> @@ -481,7 +481,7 @@ form.onsubmit = function(e) { <p>При нажатии на кнопку {{htmlelement ("button")}}, изменяется атрибут класса элемента <code><div></code> с <code>hidden</code> на <code>showing</code> (CSS примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; top: 50%; transform: translate(-50%,-50%); @@ -494,14 +494,14 @@ form.onsubmit = function(e) { left: 50%; }</font></pre> -<pre class="brush: js notranslate">var btn = document.querySelector('button'); +<pre class="brush: js">var btn = document.querySelector('button'); btn.onclick = function() { videoBox.setAttribute('class', 'showing'); }</pre> <p>Затем мы добавляем ещё пару обработчиков событий <code>onclick.</code> Первый к <code><div></code>, а второй к <code><video></code>. Идея заключается в том, чтобы при щелчке по области <code><div></code> вне зоны видео поле снова скрылось, а при клике в области <code><video></code> видео начало воспроизводиться.</p> -<pre class="brush: js notranslate">var videoBox = document.querySelector('div'); +<pre class="brush: js">var videoBox = document.querySelector('div'); var video = document.querySelector('video'); videoBox.onclick = function() { @@ -549,7 +549,7 @@ video.onclick = function() { <p>Поэтому мы можем исправить нашу текущую проблему, изменив вторую функцию-обработчик в предыдущем блоке кода:</p> -<pre class="brush: js notranslate">video.onclick = function(e) { +<pre class="brush: js">video.onclick = function(e) { e.stopPropagation(); video.play(); };</pre> |