From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../javascript/building_blocks/events/index.html | 56 +++++++++++----------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'files/ru/learn/javascript/building_blocks/events/index.html') 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/События

Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка {{htmlelement ("button")}}, при нажатии которой цвет фона изменяется случайным образом:

-
<button>Change color</button>
+
<button>Change color</button>

JavaScript выглядит так:

-
const btn = document.querySelector('button');
+
const btn = document.querySelector('button');
 
 function random(number) {
   return Math.floor(Math.random() * (number+1));
@@ -103,7 +103,7 @@ btn.onclick = function() {
 
 
В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:

 
-
const btn = document.querySelector('button');
+
const btn = document.querySelector('button');
 
 btn.onclick = function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
@@ -114,7 +114,7 @@ btn.onclick = function() {
 
 
Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье Создайте свою функцию):

 
-
const btn = document.querySelector('button');
+
const btn = document.querySelector('button');
 
 function bgChange() {
   const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
@@ -140,10 +140,10 @@ btn.onclick = bgChange;

 
 
Самый ранний из введённых в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

 
-
<button onclick="bgChange()">Press me</button>
+
<button onclick="bgChange()">Press me</button>
 

 
-
function bgChange() {
+
function bgChange() {
   const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 }

@@ -154,7 +154,7 @@ btn.onclick = bgChange;

 
 
Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

 
-
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

+
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

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

 
@@ -164,7 +164,7 @@ btn.onclick = bgChange;

 
 
Например:

 
-
const buttons = document.querySelectorAll('button');
+
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++) {
 
 
Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList, можно воспользоваться встроенным методом forEach():

 
-
buttons.forEach(function(button) {
+
buttons.forEach(function(button) {
   button.onclick = bgChange;
 });

 
@@ -184,7 +184,7 @@ for (var i = 0; i < buttons.length; i++) {
 
 
Новый тип механизма событий определён в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener(). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

 
-
var btn = document.querySelector('button');
+
var btn = document.querySelector('button');
 
 function bgChange() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
@@ -199,25 +199,25 @@ btn.addEventListener('click', bgChange);

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

 
-
btn.addEventListener('click', function() {
+
btn.addEventListener('click', function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 });

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

 
-
btn.removeEventListener('click', bgChange);

+
btn.removeEventListener('click', bgChange);

 
 
Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.

 
 
Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:

 
-
myElement.onclick = functionA;
+
myElement.onclick = functionA;
 myElement.onclick = functionB;

 
 
Поскольку вторая строка будет перезаписывать значение onclick, установленное первой. Однако, если:

 
-
myElement.addEventListener('click', functionA);
+
myElement.addEventListener('click', functionA);
 myElement.addEventListener('click', functionB);

 
 
Обе функции будут выполняться при щелчке элемента.

@@ -237,7 +237,7 @@ myElement.addEventListener('click', functionB);

 
 
Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

 
-
element.onclick = function1;
+
element.onclick = function1;
 element.onclick = function2;
 etc.

 
@@ -253,7 +253,7 @@ etc.

 
 
Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event, evt или просто e. Называется он объектом события и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:

 
-
function bgChange(e) {
+
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);

 
 
e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

 
-
var divs = document.querySelectorAll('div');
+
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++) {