Различия

Показаны различия между двумя версиями страницы.


Предыдущая версия
—object_event [2025/04/20 15:35] (текущий) – [Пример 1: Раскрывающаяся "дополнительная информация"] darkfire
Строка 1: Строка 1:
 +====== JavaScript События Object Event примеры использования ======
  
 +~~Title: JavaScript События: Объект Event, addEventListener и примеры ~~
 +{{htmlmetatags>
 +metatag-description=(Разбираемся с JavaScript событиями: как работают обработчики событий, объект Event, метод addEventListener. Примеры использования и отмена стандартного поведения.)
 +}}
 +
 +События возникают на странице в результате действий, производимых пользователем. Например - движение указателя мыши, нажатие кнопок мыши или клавиатуры.
 +
 +Пользователь - первопричина возникновения события. Однако, сигнал о том, что событие возникло подает не пользователь, а элемент страницы, на который подействовал пользователь. Такой элемент называют "отправителем" события. Знать, какой именно элемент отправил событие, очень важно для корректной обработки события. 
 +
 +Иногда события возникают без участия пользователя. К таким событиям относятся, например, окончание загрузки элемента и выгрузка элемента - load и unload.
 +
 +В [[JavaScript|JavaScript]] используется весьма уникальная система событий. Она работает абсолютно асинхронно, вообще не используя потоков. Это означает, что весь код вашего приложения будет зависеть от каких-либо действий, например, от щелчка пользователя или загрузки страницы — что будет приводить к выполнению определенного кода.
 +Основное отличие программ, спроектированных для работы с потоками от программ, спроектированных для работы с асинхронными событиями состоит в том, как происходит ожидание происходящего. __В программах, рассчитанных на потоки, вы постоянно ведете проверку, пока не будут выполнены заданные вами условия. Тогда
 +как в асинхронных программах вы просто регистрируете в качестве обработчика события функцию обратного вызова, а затем, когда наступит событие, обработчик даст вам знать, выполняя вашу функцию обратного вызова.__
 +
 +Под обработкой события подразумевается программирование реакции браузера (документа) в ответ на возникновение некоторого события. Обработчиком события называется функция или фрагмент кода [[JavaScript|JavaScript]], реализующий эту реакцию.
 +
 +===== Привязка обработчиков событий в JavaScript: современный подход =====
 +
 +Чтобы элемент на странице реагировал на действия пользователя (например, клик, наведение мыши, ввод текста), нужно назначить обработчик события — функцию, которая сработает при наступлении этого события.
 +
 +Основные способы назначения обработчиков событий:
 +  * Первый способ назначения обработчика события состоит в использовании HTML атрибутов элемента. Использование атрибутов HTML (устаревший способ, не рекомендуется). Этот способ работает, но он смешивает разметку и логику, что усложняет поддержку кода.
 +<file javascript>
 +<элемент имя_события="код обработчика">
 +
 +<button onclick="alert('Кнопка нажата!')">Нажми меня</button>
 +</file>
 +  * Второй способ состоит в использовании свойств элемента из сценария JavaScript. Предположим, на странице есть элемент с идентификатором "element1". Тогда программирование реакции этого элемента на щелчек мыши осуществляется следующим образом:
 +<file javascript>
 +element1.имя_события = обработчик;
 +</file> где обработчик - имя функции, которая вызывается в ответ на возникновение события. Такой способ назначения обработчика события применяется в тех случаях, когда объекту не соответствует HTML элемент (например - объект window, ему не соответствует ни один элемент страницы, однако иногда возникает необходимость обрабатывать события изменения размеров - onresize).
 +Пример назначения обработчика через свойство элемента в JavaScript. Минус: Можно назначить только один обработчик на событие (следующее присваивание перезапишет предыдущий).
 +<file javascript>
 +<button id="btn">Нажми меня</button>
 +
 +<script>
 +  const btn = document.getElementById('btn');
 +  btn.onclick = function() {
 +    alert('Кнопка нажата!');
 +  };
 +</script>
 +</file>
 +  * Рекомендуемый способ — метод **addEventListener()**. DOM - привязка: разработанная W3C. Привязка осуществляется при помощи функции addEventListener, принимающей три параметра: название события (например, click), функцию, которая будет обрабатывать событие, и логический флаг (фаза) для разрешения или отмены захвата события. Если логический флаг(фаза) установлен в true, то при срабатывании события во вложенном элементе, обработчик будет вызван на фазе "захвата", а если значение будет false, то - на фазе "всплытия". __Чаще всего фаза останавливается в false так IE не поддерживает модель событий DOM уровня 2 и поэтому не понимает фазы "захвата"__.
 +<file javascript>
 +// Находим первый элемент <form> на странице
 +const form = document.querySelector('form');
 +
 +if (form) {
 +// Привязываем обработчик события 'submit' к форме
 +  form.addEventListener('submit', function(event) {
 +    // Отменяем стандартное действие — отправку формы
 +    event.preventDefault();
 +
 +    // Здесь можно добавить свою логику обработки данных формы
 +    console.log('Отправка формы отменена');
 +
 +    // Например, валидация или AJAX-запрос
 +  });
 +}
 +</file> Способ привязки, предложенный W3C, имеет следующие преимущества: этот метод поддерживает обе фазы обработки события и захват и всплытие; внутри функции обработки события ключевое слово this ссылается на текущий элемент; объект события всегда доступен в первом параметре функции обработки; к элементу можно привязать сколько угодно событий, без переписывания ранее привязанных обработчиков.
 +
 +Преимущества:
 +
 +  * Можно назначать несколько обработчиков на одно событие.
 +  * Можно легко удалять обработчики с помощью removeEventListener.
 +  * Чистое разделение логики и разметки.
 +  * Работает с любыми объектами, поддерживающими события (элементы, window, document и пр.).
 +
 +<file javascript>
 +<button id="btn">Нажми меня</button>
 +
 +<script>
 +  const btn = document.getElementById('btn');
 +
 +  function handleClick() {
 +    alert('Кнопка нажата!');
 +  }
 +
 +  btn.addEventListener('click', handleClick);
 +</script>
 +</file>
 +<panel type="warning">
 +Недостаток W3C- привязки: он [[http://msdn.microsoft.com/ru-ru/library/ff975245(v=vs.85).aspx|не работает в Internet Explorer до версии 9]]; вместо него в старых версиях IE нужно применять функцию **attachEvent**. addEventListener позволяет установить несколько обработчиков одного и того же события(порядок выполнения не гарантируется).
 +
 +В 2025 году attachEvent не актуален и не используется в современных веб-разработках. Для событий следует применять только addEventListener и при необходимости полифиллы для очень старых браузеров.
 +</panel>
 +
 +<panel type="warning">Важно понять, что хотя события и запускаются в любой момент, два разных скрипта одновременно работать не могут. Если скрипт работает, обработчики событий и запланированные другим способом куски кода будут ждать своей очереди. Поэтому документ подвисает, когда скрипт работает слишком долго. Браузер не обрабатывает щелчки и другие события внутри документа потому, что он не может запустить обработчики событий, пока работает текущий скрипт.</panel>
 +===== Всплытие событий и stopPropagation =====
 +
 +Когда в элементе [[DOM]] возникает событие, браузер проверяет наличие обработчика данного события в самом элементе, и если таковой определен, вызывает его. После того как элемент получит свой шанс обработать событие, браузер проверяет наличие обработчика событий данного типа в родительском элементе, и если в этом элементе присутсвует обработчик события данного типа, он также будет вызван; затем подобная проверка происходит у родителя этого элемента, пока не будет достигнута вершина дерева DOM.
 +
 +Почти все события всплывают. Ключевое слово в этой фразе – "почти". К примеру, событие focus не всплывает. Есть и другие примеры, но все же это скорее исключение, чем правило, большинство событий как раз всплывают.
 +
 +Одной из ключевых возможностей всплывания событий является способность отправлять событие родительскому элементу для обработки. Это полезно, когда необходимо обеспечить, что один обработчик событий хватит для группы элементов с одинаковой функциональностью.
 +
 +==== Пример: Отправка события к родительскому элементу ====
 +Одной из ключевых возможностей всплытия событий является способность отправлять событие к родительскому элементу для обработки. Это полезно, когда нужно обеспечить, чтобы один обработчик событий был достаточен для группы элементов с одинаковой функциональностью.
 +<file javascript>
 +<div id="parent">
 +    Родительский элемент
 +    <button id="child">Дочерний элемент</button>
 +</div>
 +</file>
 +<file javascript>
 +const parent = document.getElementById("parent");
 +const child = document.getElementById("child");
 +
 +parent.addEventListener("click", function (event) {
 +    alert("Обработчик события на родительском элементе");
 +});
 +
 +child.addEventListener("click", function (event) {
 +    alert("Обработчик события на дочернем элементе");
 +    event.stopPropagation(); // Остановка всплытия события
 +});
 +</file>
 +В этом примере обработчики событий назначены как для родительского, так и для дочернего элемента. При клике на дочернем элементе сначала срабатывает обработчик дочернего элемента, а затем — родительского. Однако благодаря методу stopPropagation() всплытие события останавливается, и обработчик на родительском элементе не вызывается.
 +
 +Всплытие событий — это мощный механизм в JavaScript и DOM, который позволяет обрабатывать события на родительских элементах, если они были вызваны на дочерних. Это облегчает работу с событиями на веб-страницах и позволяет создавать более компактный и поддерживаемый код. Используя всплытие событий вместе с методом stopPropagation(), вы можете точно контролировать, как события распространяются вверх по DOM-дереву, обеспечивая более высокий уровень управления вашими веб-приложениями.
 +===== Object Event =====
 +
 +Объект Event ([[https://www.w3schools.com/jsref/dom_obj_event.asp|HTML DOM Events]]) позволяет получать подробную информацию о событии, что позволяет сделать обработку более эффективной. Необходимо помнить следующее: 
 +  * объект event создается браузером автоматически
 +  * объект event доступен только в обработчиках событий 
 +  * объект event не имеет методов. В вашем распоряжении только свойства, которые в момент возникновения события принимают те или иные значения.
 +
 +
 +
 +<file bash>
 +Свойство Пояснение 
 +type Возвращает тип события 
 +returnValue позволяет установить возвращаемое обработчиком события значение. 
 +true - (по умолчанию) стандартный обработчик будет вызван 
 +false - стандартный обработчик не вызывается 
 + 
 +cancelBubble устанавливает признак "всплывания" события 
 +true - всплывание события не происходит 
 +false - (по умолчанию) событие всплывает 
 + 
 +srcElement элемент - источник события 
 +toElement указывает элемент, на который был уведен курсор мыши при возникновении события onMouseOut 
 +fromElement указывает элемент, с которого пришел курсор мыши при возникновении события onMouseOver 
 +button определяет, какие кнопки мыши были нажаты в момент возникновения события 
 +0 - нет нажатых кнопок 
 +1 - левая кнопка 
 +2 - правая кнопка 
 +3 - левая и правая кнопки 
 +4 - средняя кнопка 
 +5 - левая и средняя кнопки 
 +6 - правая и средняя кнопки 
 +7 - все три кнопки 
 + 
 +wheelDelta определяет смещение при прокрутке колеса мыши. Отрицательное значение - поворот колеса "на себя", положительное - поворот колеса "от себя" 
 +offsetX, offsetY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла элемента, отправившего событие. 
 +x, y Координаты курсора мыши в момент возникновения события относительно верхнего левого угла относительно позиционируемого родительского элемента. 
 +clientX, clientY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла клиентской области страницы. 
 +screenX, screenY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла экрана. 
 +keyCode Код нажатой на клавиатуре клавиши в Unicode 
 +altKey Признак состояния кнопки Alt в момент возникновения события: true - нажата, false - свободна 
 +altLeft Признак состояния левой кнопки Alt в момент возникновения события: true - нажата, false - свободна 
 +ctrlKey Признак состояния кнопки Ctrl в момент возникновения события: true - нажата, false - свободна 
 +ctrlLeft Признак состояния левой кнопки Ctrl в момент возникновения события: true - нажата, false - свободна 
 +shiftKey Признак состояния кнопки Shift в момент возникновения события: true - нажата, false - свободна 
 +shiftLeft Признак состояния левой кнопки Shift в момент возникновения события: true - нажата, false - свободна 
 +repeat признак удерживания клавиши 
 +</file>
 +
 +===== Запрет вызова стандартного обработчика =====
 +Существует ряд элементов в HTML, для которых определены некоторые обработчики событий по умолчанию или стандартные обработчики. Так, для элемента <a> (гиперссылка) определён обработчик onclick, выполняющий переход на ресурс, указанный в атрибуте href. Если вы желаете, чтобы после вашей обработки определённого события стандартный обработчик не вызывался, необходимо отменить стандартное поведение браузера.
 +
 +В современных браузерах для этого используется метод event.preventDefault(), который вызывается внутри функции-обработчика события. Этот метод предотвращает выполнение действия по умолчанию, например, переход по ссылке или отправку формы, позволяя вам реализовать собственную логику обработки события.
 +
 +Пример отмены перехода по ссылке:
 +<file javascript>
 +<a href="https://example.com" id="myLink">Перейти на Example.com</a>
 +
 +<script>
 +  const link = document.getElementById('myLink');
 +  link.addEventListener('click', function(event) {
 +    event.preventDefault(); // Отменяем стандартный переход по ссылке
 +    alert('Переход отменён, выполняется пользовательская логика');
 +  });
 +</script>
 +</file>
 +Ранее в старых браузерах, таких как Internet Explorer до версии 9, для отмены стандартного поведения использовалось присвоение event.returnValue = false или возврат false из обработчика. Однако эти методы считаются устаревшими и не рекомендуются к применению в современных проектах.
 +
 +Использование event.preventDefault() обеспечивает кроссбраузерную и надёжную отмену стандартных действий, что делает ваш код более понятным и поддерживаемым. Таким образом, если необходимо запретить выполнение стандартного обработчика события, всегда следует вызывать event.preventDefault() в вашем обработчике.
 +===== Пример 1: Раскрывающаяся "дополнительная информация" =====
 +На web страницах часто используют этот прием. Например, приводится описание некоторого примера в сокращенном виде и добавляется кнопка, при нажатии на которую раскрывается дополнительная информация - полный код примера. Раскрытие дополнительной информации осуществляется путем изменения свойства style.display некоторого элемента. Для того, чтобы пример был изначально скрыт, его свойство style.display должно иметь значение "none". Для раскрытии кода примера, свойству style.display присваивают значение "block".
 +<file javascript>
 +<!DOCTYPE html>
 +<html lang="ru">
 +<head>
 +    <meta charset="UTF-8" />
 +    <title>Пример отображения</title>
 +    <style>
 +        #primer1 {
 +            display: none;
 +            padding: 5px;
 +            background-color: #dddddd;
 +            white-space: pre-wrap; /* Чтобы переносы строк сохранялись */
 +        }
 +        #primer1.visible {
 +            display: block;
 +        }
 +    </style>
 +</head>
 +<body>
 +    <button id="toggleBtn">Отобразить</button> пример
 +    <pre id="primer1">
 +#include <iostream.h> 
 +
 +void main () {
 +    cout<<"Hello, world!";
 +}
 +    </pre>
 +
 +    <script>
 +        const btn = document.getElementById('toggleBtn');
 +        const pre = document.getElementById('primer1');
 +
 +        btn.addEventListener('click', () => {
 +            pre.classList.toggle('visible');
 +            btn.textContent = pre.classList.contains('visible') ? 'Скрыть' : 'Отобразить';
 +        });
 +    </script>
 +</body>
 +</html>
 +</file>
 +===== Пример 2: Работаем с мышью: перетаскивание элементов. Drag and Drop. =====
 +Предлагаемый для рассмотрения пример демонстрирует минимально функциональную версию реализации технологии перетаскивания объектов мышью. Это учебный пример, на базе которого, я надеюсь, вы сможете создавать собственные, более продвинутые, решения. 
 +
 +Приступим. Для начала зададимся вопросом - какие события мы будем обрабатывать для перетаскиваемого элемента? Во первых, элемент нужно "схватить" мышью - то есть, нажать на нем левую кнопку мыши. Значит, событие "mousedown" отрабатывать необходимо. Так же дело обстоит и с "отпусканием" элемента. К списку обрабатываемых событий добавляем "mouseup". Осталось событие перемещения курсора мыши - "mousemove", при котором мы будем менять позицию перетаскиваемого элемента. 
 +
 +Итак, с событиями вопрос выяснен. Теперь разберемся с самими элементами. Дело в том, что задавать координаты элементов (left и top) можно только для абсолютно позиционируемых (в нашем случае) элементов. Значит - в стилевое оформление перетаскиваемых элементов должна входить строка "position: absolute;". 
 +
 +Ниже приводится полный код примера. Обратите внимание на следующую особенность: события mousedown и mouseup обрабатываются для перетаскиваемого элемента, а событие "mousemove" - для элемента <body>. Это связано с тем, что мышь - инертный манипулятор. То есть, при резком рывке курсора мы рискуем выскочить за пределы перетаскиваемого элемента и "уронить" его, тогда как вылететь за пределы страницы можно не бояться.
 +После выполнения примера, вы столкнетесь (или уже столкнулись) с "маленькой" неприятностью: при "захвате" элемента его верхний левый угол "прыгает" в позицию курсора, после чего отцепиться от элемента не представляется возможным иначе, как перезагрузкой страницы. 
 +
 +Исправим этот недостаток. Для этого будем при "захвате" элемента запоминать смещение курсора относительно верхнего левого угла перетаскиваемого элемента в глобальных переменных. Информация о смещении курсора хранится в свойствах offsetX и offsetY объекта event.
 +<file html>
 +<html>
 +    <head>
 +        <style type="text/css">
 +           #square1 {
 +               width: 50;
 +               height: 50;
 +               position: absolute; 
 +               left: 10;
 +               top: 10;
 +               border: 1px solid black;
 +               background: #DDDDDD;
 +           }
 +        </style>
 +        <script type="text/javascript">
 +            var elementToDrag = null;           
 +    var offX, offY; // глобальные переменные для хранения смещения     
 +    function captureElement (elem) { // "захват" элемента мышью 
 +        if (!elementToDrag) {
 +            elementToDrag = elem;
 +            offX = event.offsetX; // запоминаем координаты курсора 
 +            offY = event.offsetY; // в момент щелчка 
 +        }
 +    }    
 +    function releaseElement () { // "отпускание" элемента 
 +        elementToDrag = null;
 +    }    
 +    function dragElement () { // "перетаскивание" элемента 
 +        if (elementToDrag){
 +            elementToDrag.style.pixelLeft = event.clientX - offX; // вносим поправку 
 +            elementToDrag.style.pixelTop = event.clientY - offY;  // в координаты элемента 
 +        }
 +    }
 +        </script>
 +
 +    </head>
 +    <body onmousemove="dragElement()">
 +        <span id="square1" 
 +              onmousedown="captureElement(this)" 
 +              onmouseup="releaseElement()">
 +        </span>
 +    </body>
 +</html>
 +</file>

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга