JavaScript: добавление интерактивности в документы HTML

5 (100%) 3 vote[s]

Добавить небольшие элементы интерактивности в веб-приложения можно с помощью одного только CSS, например, с помощью псевдо-класса CSS : hover . Однако запуск определенного действия при нажатии кнопки, знание, какая кнопка мыши была использована, вычисление (x, y) позиции указателя мыши в системе координат кнопки или выполнение более сложных задач может быть выполнено только через JavaScript.  

С помощью JavaScript нажатие кнопки, движение мыши, изменение размера окна и многие другие взаимодействия создают так называемые «события». Время и порядок событий не могут быть предсказаны заранее. Мы говорим, что «обработка событий» является асинхронной. Веб-браузеры обнаруживают события по мере их возникновения и могут передавать их в код JavaScript. Они делают это, позволяя вам регистрировать функции как прослушиватели событий , также называемые обработчиками или обратными вызовами для определенных событий.

Каждый раз, когда происходит событие, браузер помещает его в «очередь событий».

Затем браузер просматривает список «прослушивателей событий» и вызывает тех, кто соответствует типу событий, которые они слушают.

Добавление прослушивателя событий в документ

Давайте посмотрим, как работают события в JavaScript.

Первый пример слушателя события на весь документ

В этом примере показано, как добавить простой слушатель событий для обнаружения щелчков или движений мыши. Он слушает события, которые произойдут в любом месте на веб-странице. Когда мы добавляем прослушиватель событий на всю страницу, синтаксис такой: печатаем «AddEventListener», за которым следует имя события.

Здесь мы собираемся слушать щелчки мыши. А затем указывается ссылка на функцию обратного вызова, которая обработает событие. 

<html>
  <head>
  <title>Первый пример слушателя события</title>
  <meta charset="utf-8">
  <script>
   // добавим слушатель события клика на всю страницу
   
   // Версия 1: мы используем отдельную функцию обратного вызова
   //addEventListener('click', processClick);
   /* 
    function processClick(evt) {
      alert("click");
    }*/
   // версия 2 (очень распространенная): мы помещаем обратный вызов между // круглыми скобками
    addEventListener('click', function(evt) {
      alert("click");
    });
   // версия 3: используйте синтаксис с «вкл», а затем
   // название события с последующим обратным вызовом
   // функция или ссылка на функцию обратного вызова
   // При прослушивании всего окна мы обычно
   //используем window.onclick, window.onkeyup и т. д.
    
   window.onclick = processClick;
     
   function processClick(evt) {
      alert("click");
   };
    
</script>
</head>
<body>
  <p>Нажмите где-нибудь на этой странице</p>
</body>
</html>

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

Добавление прослушивателя событий к определенному элементу HTML

В этом примере вместо  непосредственного использования метода addEventListener мы использовали его для объекта DOM (кнопка):

      • Получите ссылку на элемент HTML, который может запускать события, которые вы хотите обнаружить. Это делается с помощью DOM API. В этом примере мы использовали один из наиболее распространенных / полезных методов: var b = document.querySelector («# myButton»);
      • Вызовите метод addEventListener для этого объекта. В примере: b.addEventListener («щелчок», обратный вызов).

HTML:

<html>
  <head>
  <title>Второй пример слушателя события</title>
    <meta charset="utf-8">
</head>
<body> 
  <button id="myButton">Нажми меня!</button>
  
   <script>
    // 1 получить ссылку на элемент
    let b = document.querySelector("#myButton");
    
    // 2 добавить прослушиватель событий
    b.addEventListener('click', function(evt) {
      alert("clicked!");
    })
  </script>
</body>
</html>

Каждый объект DOM имеет метод addEventListener . Как только вы получите ссылку на любой элемент HMTL из JavaScript, вы можете начать слушать события на нем.

Удаление слушателей событий

Когда мы нажимаем на кнопку, мы выполняем функцию обратного вызова processClick (evt) и внутри удаляем прослушиватель, который мы ранее зарегистрировали. Следствие: если мы снова нажмем кнопку, ничего не произойдет, так как к ней больше не подключен прослушиватель событий щелчка.

HTML:

<!DOCTYPE html>
<html>
  <head>
  <title>Удаление слушателя события</title>
    <meta charset="utf-8">
</head>
<body>
  <button id="myButton">Нажмите меня, это будет работать только один раз!</button>
  <p></p>
  <script>
    var b = document.querySelector("#myButton");
    b.addEventListener('click', processClick);
    
    function processClick(evt) {
     alert("Нажата кнопка, прослушиватель событий удален, попробуйте нажать кнопку еще раз: больше ничего не произойдет!"); 
      b.removeEventListener('click', processClick);
    }
  </script> 
</body>
</html>

Обратите внимание, что для удаления прослушивателя событий вы должны были добавить его с именованной функцией, чтобы мы могли передать его как addEventListener, так и removeEventListener.

События мыши

Обнаружение событий мыши на холсте довольно просто: вы добавляете прослушиватель событий на canvas (холст), и браузер вызывает этого слушателя, когда происходит событие.

Пример ниже касается прослушивания событий mouseup и mousedown (когда пользователь нажимает или отпускает любую кнопку мыши): 

canvas.addEventListener('mousedown', function (evt) {
   // сделать что-нибудь с событием mousedown
});
 
canvas.addEventListener('mouseup', function (evt) {
   // сделать что-нибудь с событием mouseup
});

Событие, полученное функцией слушателя, будет использовано для получения номера кнопки или координат курсора мыши. Прежде чем рассматривать различные примеры, давайте рассмотрим различные типы событий, которые мы можем слушать.

Типы событий, связанных с мышью:

      • click. Событие происходит, когда пользователь нажимает на элемент (нажимает кнопку и отпускает ее)
      • dblclick. Событие происходит, когда пользователь дважды щелкает элемент
      • mousedown. Событие происходит, когда пользователь нажимает кнопку мыши
      • mouseup. Событие происходит, когда пользователь отпускает кнопку мыши над элементом
      • mousemove. Событие происходит, когда указатель движется, когда он находится над элементом
      • mouseenter. Событие происходит, когда указатель перемещается на элемент
      • mouseleave. Событие происходит, когда указатель перемещается из элемента
      • mouseover. Событие происходит, когда указатель перемещается на элемент или на один из его дочерних элементов.
      • contextmenu. Событие происходит, когда пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню.

Свойства MouseEvent

      • button. Возвращает, какая кнопка мыши была нажата, когда было вызвано событие мыши.
      • clientX and clientY. Возвращает координаты указателя мыши относительно системы координат элемента, которая вызвала событие. Если щелкнуть в левом верхнем углу, значение будет всегда (0,0) независимо от положения прокрутки, эти координаты относятся к VIEWPORT (видимая часть страницы документа).
      • pageX and pageY. Возвращает координаты указателя мыши относительно документа, когда было вызвано событие мыши. Они относятся ко всему документу / странице и всегда будут относиться к самому началу документа / страницы, даже если верхняя часть страницы не видна из-за прокрутки вниз. Они будут меняться, когда страница прокручивается, а мышь не двигается!
      • screenX and screen. Возвращает координаты указателя мыши относительно экрана, когда произошло событие.
      • altKey, ctrlKey, shiftKey. Возвращает, была ли нажата клавиша «alt, ctrl и shift» при запуске события.
      • detail. Возвращает число, которое указывает, сколько раз была нажата мышь.

Обнаружение щелчка по элементу

Нажмите также на этот div!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Обнаружение щелчков мыши на элементах</title>
  <style>
 #myDiv {
  color:red;
  background-color: pink;
  width:100px;
  height:100px;
  text-align:center;
  margin:20px;
}
 </style>
</head>
  <body>
    <button id="button1" onclick="processClick(event)">Просто кнопка</button>
    <div id="myDiv" onclick="processClick(event)">Нажмите также на этот div!</div>
    <div id="clicks"></div>
 <script>
      window.onclick = processClick;

function processClick(evt) {
  var clicks = document.querySelector('#clicks');

  var target = evt.target.id;
  
  if(target === "") {
    clicks.innerHTML += "You clicked on the window, not on a particular element!<br>";
  } else {
    clicks.innerHTML += "Element clicked id: " + target + "<br>";// в этой строке можно записать так: clicks.innerHTML = "Element clicked id: " + target + "<br>"; без + перед = "Element clicked id: " + target + "<br>";
   
  }
   
  evt.stopPropagation(); 
}
</script>
</body>
</html>

!Относительно 

document.body.innerHTML = "";

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено: 

document.body.innerHTML = "";  // Replaces body content with an empty string.

Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности. Есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например: 

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте node.textContent. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. 

Различия между clientX / clientY и pageX / pageY

Исходный код использует библиотеку jQuery и поступает из потока stackOverflow . Переместите указатель мыши, посмотрите на разные свойства. Затем прокрутите страницу и снова посмотрите на свойства; обратите внимание, как изменяется pageX / pageY , поскольку они относятся к верхней части страницы, даже если они не видны.

Mouse position inside: X     Y
- client: Client Viewport
- page: Document Page (scroll down to see the difference)
(scrollTop: Scroll top [pageY-clientY] )
- screen: Screen

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>клиент - страница - экран</title>
<style>
   body{
  height:4000px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
}

table{
  position:fixed;
  width:100%;
  padding:10px 20px;
  background:#eee;
  border-spacing:5px 0; 
}
table td{
  vertical-align:bottom;
  border:1px dashed #ddd;
  padding:3px 10px;
}
table tr:first-child{
  background:#ddd;
} 
  </stile>
</head>
<body>
    <table>
      <tr>
        <td>Mouse position inside:</td>
        <td>X &nbsp;&nbsp;&nbsp; Y</td>
      </tr>
      <tr>
        <td>- client:</td>
        <td id="client"></td>
        <td>Client Viewport</td>
      </tr>
      <tr>
        <td>- page:</td>
        <td id="page"></td>
        <td>Document Page (scroll down to see the difference)</td>
      </tr>
      <tr>
        <td>(scrollTop:</td>
        <td id="scrollTop"></td>
        <td>Scroll top [pageY-clientY] )</td>
      </tr> 
      <tr>
        <td>- screen:</td>
        <td id="screen"></td>
        <td>Screen</td>
      </tr>
    </table>
  <script>
  var m = ['client','page','screen']; // mods
$(document).mousemove(function(e){
  for(var i=0; i<3; i++){
    $('#'+m[i]).text((e[m[i]+'X'])+' '+ (e[m[i]+'Y']));
  }
  $('#scrollTop').text(
    $('html, body').scrollTop()
  );
});
  </script>
</body>
</html>

Объединение mouseup, mousedown, mousemove для реализации поведения щелчка и перетаскивания (Drag-and-Drop)

Cобытия перемещения мыши относительно страницы:

Пожалуйста, нажмите и перетащите div ниже.

Перетащи меня!

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
.draggable {
  width:300px;
  height:50px;
  background-color:#666;
  color:white;
  padding:10px 12px;
  text-align: center;
  cursor:move;
  position:absolute; /* важно (все позиции не "статичны") */
  border: 1px solid #080f42;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
</head>
  <body>
    <p style="font-size:24px;">Пожалуйста, нажмите и перетащите div ниже.</p>
   <div id="dragMe" class='draggable'>Перетащи меня!</div>
<script>
window.onmousemove = moveElem;
window.onmouseup = stopMovingElem;
window.onload = init;

var selected = null; //элемент для перемещения
var oldMouseX, oldMouseY; // Сохраняет координаты x и y указателя мыши
var elemX, elemY;

function init() {
    document.querySelector('.draggable').onmousedown = function (evt) {
        dragInit(evt);
    };
}
  
// Будет вызван, когда пользователь начнет перетаскивать элемент
function dragInit(evt) {
    // Хранить элемент
    selected = evt.target;
    elemX = selected.offsetLeft;
    elemY = selected.offsetTop;
  
    oldMouseX = evt.clientX;
    oldMouseY = evt.clientY;
}

// Будет вызываться при перетаскивании пользователем элемента
function moveElem(e) {
    // новая позиция мыши
    var newMouseX = e.clientX;
    var newMouseY = e.clientY;
  
    if(oldMouseX !== undefined) {
        // сколько пикселей мы двигали мышью?
        var dx = newMouseX - oldMouseX;
        var dy = newMouseY - oldMouseY;
     }
    
    if (selected !== null) {  
        // переместить выделенный элемент на dx, dy пикселей хозонтально / вертикально
        changePosOfSelectedElement(dx, dy);
    }
  
    // обновить старую позицию мыши
    oldMouseX = newMouseX;
    oldMouseY = newMouseY;
}

function changePosOfSelectedElement(dx, dy) {
  // обновить старую позицию выбранного элемента
  elemX += dx;
  elemY += dy;
  
  // изменить позицию элемента на экране 
  // изменив его CSS свойства left / top
  selected.style.left = elemX + 'px';
  selected.style.top = elemY + 'px';
}

// Уничтожить объект, когда мы закончим
function stopMovingElem() {
    selected = null;
}

</script>
  </body>
</html>

Форма и поле ввода событий

События, связанные с формами:

      • input. Событие происходит, когда элемент получает пользовательский ввод (например, клавиша вводится в поле ввода, ползунок перемещается и т. Д.)
      • change. Событие происходит, когда содержимое элемента формы, выбор или проверенное состояние изменились (для <input>, <select> и <textarea>). Слушатель события изменения на слайдере будет генерировать событие, когда заканчивается перетаскивание, в то время как входные события будут домтупны для выполнения каких-либо действий при перемещении слайдера.
      • focus. Событие происходит, когда элемент получает фокус (например, пользователь щелкает в поле ввода)
      • blur. Событие происходит, когда элемент теряет фокус (например, пользователь нажимает на другой элемент)
      • select. Событие происходит после выбора пользователем текста (для <input> и <textarea>)
      • submit. Событие происходит при отправке формы

Простая проверка поля ввода с использованием события input

Проверка на лету, когда пользователь вводит текст в поле ввода текста. Условие — ввод не менее 5 символов.

Просто введите имя в поле ввода и посмотрите, что получится!

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Простая проверка поля ввода</title>
</head>
<body>
  <h1>Простая проверка поля ввода с использованием события "input"</h1>
  <p>Просто введите имя в поле ввода и посмотрите, что получится!</p>
<label>
  <span>Name (required):</span>
  <input type="text" 
         name="nom" 
         maxlength="32" 
         required
         oninput = "validateName(this)">
</label>
  <p>
  <span id="nameTyped"></span>
</p> 
  <script>
   function validateName(field) {
  // это текстовое поле ввода
  var name = field.value;  
  
  // получить вывод div
  var output = document.querySelector('#nameTyped');
  // отобразить значение, набранное в div
  output.innerHTML = "Valid name: " + name;
  
  // проверка
  // содержит ли имя запрещенные символы
  // или слишком короткое
  // например, давайте запретим имена с длиной <5 символов
  if(name.length < 5) {
    output.innerHTML = "This name is too short (at least 5 chars)";
  }
} 
  </script>
</body>
</html>

Второй вариант: использование события ‘keyup’:

Максимальное количество вводимых символов — 32. «!» недопустимый.

Simple input field validation using keyup events

Простая проверка поля ввода с использованием события input

Введите имя в поле ввода и посмотрите, что получится! Попробуйте сделать ввод клавишей "!"

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Простая проверка поля ввода с использованием событий keyup</title>
</head>
<body>
  <h1>Простая проверка поля ввода с использованием события input</h1>
  <p>Просто введите имя в поле ввода и посмотрите, что получится! <span style="color:red"> ПОПРОБУЙТЕ ТИП "!" тоже</span></p>
<label>
  <span>Имя (required):</span>
  <input type="text" 
         name="nom" 
         maxlength="32" 
         required
         onkeyup = "validateName(event)">
</label>
  <p>
  <span id="keyTyped"></span>
</p>
  <script>
    function validateName(evt) {
  // это текстовое поле ввода
  var key = evt.key;  
  
  // получить вывод div
  var output = document.querySelector('#keyTyped');
  // отобразить значение, набранное в div
  output.innerHTML = "Valid key: " + key;
  
  // проверка
  // содержит ли имя запрещенные символы
  if(key === "!") {
    output.innerHTML = "Эта клавиша запрещена!";
    // удалить запрещенный символ
    // текущее введенное значение
    var name = evt.target.value;
    // мы используем функцию JavaScript подстроки
    // удалить последний символ
    // первый параметр = начальный индекс
    // второй = последний индекс
    evt.target.value = name.substring(0, name.length-1);
  }
}
  </script>
</body>
</html>

Простая проверка поля <input type=range> с использованием события ‘input’

Переместите ползунок

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Использование слайдера JavaScript</title>
</head>
<body>
  <h1>Простая проверка <code> & lt; input type = range & gt; </ code> с использованием события input</h1>
  <p>Просто переместите ползунок</p>
<label>
 1 <input type="range" 
         min=1
         max=12
          step=0.1
         oninput = "doSomething(event)"> 12
</label>
  <p>
  <span id="sliderValue"></span>
</p>
  <script>
   function doSomething(evt) {
  // это значение слайдера
  var val = evt.target.value;  
  
  // получить вывод div
  var output = document.querySelector('#sliderValue');
  // отобразить значение, набранное в div
  output.innerHTML = "Value selected: " + val;
} 
  </script>
</body>
</html>

Простая проверка поля <input type=number> с использованием события ‘input’

Введите число или используйте маленькие вертикальные стрелки:



HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Использование ввода чисел в JavaScript</title>
</head>
<body>
  <h1>Простая проверка <code> & lt; input type = number & gt; </ code> с использованием события input</h1>
  <p>Введите число или используйте маленькие вертикальные стрелки</p>
<label>
  Введите число: 
<input type="number" 
         min=1
         max=12
          step=0.1
         oninput = "doSomething(event)">
</label>
  <p>
  <span id="numberValue"></span>
</p>
  <script>
   function doSomething(evt) {
  // это значение слайдера
  var val = evt.target.value;  
  
  // получить вывод div
  var output = document.querySelector('#numberValue');
  // отобразить значение, полученное в div
  output.innerHTML = "Value selected: " + val;
} 
  </script>
</body>
</html>

Простое использование <input type=color> для изменения цвета

Вывод цвета по шестнадцатеричному коду (hex). Можно использовать как генератор цвета.

Кликните по темному экрану, выберите цвет, чтобы изменить цвет фона:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Выбор цвета JavaScript</title>
</head>
<body>
  <h1>Простое использование <code> & lt; input type = color & gt; </ code></h1>
  <p>Выберите цвет, чтобы изменить цвет фона страницы</p>
<label>
<input type="color" 
         onchange = "changePageBackgroundColor(this.value);">
  <!-- мы могли бы использовать oninput = в предыдущей строке -->
</label>
  <p>
  <span id="choosedColor"></span>
</p>
  <script>
    function changePageBackgroundColor(color) {
document.body.style.backgroundColor = color;  
  // получить вывод div
  var output = document.querySelector('#choosedColor');
  // отобразить значение, набранное в div
  output.innerHTML = "Color selected: " + color;
}
  </script>
</body>
</html>

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 407

Hosting Ukraine

FolkWindows

Случайный выбор

Популярные записи