Введение в события
События — это действия или случаи, возникающие в программируемой вами системе, о которых система сообщает вам для того, чтобы вы могли с ними взаимодействовать. Например, если пользователь нажимает кнопку на веб-странице, вы можете ответить на это действие, отобразив информационное окно. В этой статье мы обсудим некоторые важные концепции, связанные с событиями, и посмотрим, как они работают в браузерах. Эта статья не является исчерпывающим источником по этой теме — здесь только то, что вам нужно знать на этом этапе.
| Предпосылки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, Первые шаги в JavaScript. |
|---|---|
| Задача: | Понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования. |
Серия удачных событий
При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлёту.
В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:
- Пользователь кликает мышью или наводит курсор на определённый элемент.
- Пользователь нажимает клавишу на клавиатуре.
- Пользователь изменяет размер или закрывает окно браузера.
- Завершение загрузки веб-страницы.
- Отправка данных через формы.
- Воспроизведение видео, пауза или завершение воспроизведения.
- Произошла ошибка.
Подробнее о событиях можно посмотреть в Справочнике по событиям.
Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.
Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.
Простой пример
Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка , при нажатии которой цвет фона изменяется случайным образом:
button>Change colorbutton>
button margin: 10px; >
JavaScript выглядит так:
const btn = document.querySelector("button"); function random(number) return Math.floor(Math.random() * (number + 1)); > btn.onclick = function () const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; >;
В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const , используя функцию Document.querySelector() . Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента .
Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент — всякий раз, когда пользователь щёлкает по нему.
Пример вывода выглядит следующим образом:
События не только для веб-страниц
События, как понятие, относятся не только к JavaScript — большинство языков программирования имеют модель событий, способ работы которой часто отличается от модели в JavaScript. Фактически, даже модель событий в JavaScript для веб-страниц отличается от модели событий для просто JavaScript, поскольку используются они в разных средах.
Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют обработчики, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция on() для регистрации обработчиков событий, и функция once() для регистрации обработчика событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий HTTP connect event docs.
Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства обработчиков событий пишутся в так называемом регистре CamelCase (например, onMessage , а не onmessage ) и должны сочетаться с функцией addListener . См. runtime.onMessage page для примера.
На данном этапе обучения вам не нужно особо разбираться в различных средах программирования, однако важно понимать, что принцип работы событий в них отличается.
Способы использования веб-событий
Существует множество различных способов добавления кода обработчика событий на веб-страницы так, чтобы он срабатывал при возникновении соответствующего события. В этом разделе мы рассмотрим различные механизмы и обсудим, какие из них следует использовать.
Свойства обработчика событий
В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:
const btn = document.querySelector("button"); btn.onclick = function () var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; >;
В данной ситуации свойство onclick — это свойство обработчика события. В принципе это обычное свойство кнопки как элемента (наравне с btn.textContent или btn.style (en-US) ), но оно относится к особому типу. Если вы установите его равным какому-нибудь коду, этот код будет запущен при возникновении события (при нажатии на кнопку).
Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье Создайте свою функцию):
const btn = document.querySelector("button"); function bgChange() const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; > btn.onclick = bgChange;
Давайте теперь поэкспериментируем с другими свойствами обработчика событий.
Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:
- btn.onfocus и btn.onblur — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.
- btn.ondblclick (en-US) — Цвет будет изменяться только при двойном щелчке.
- window.onkeypress , window.onkeydown , window.onkeyup (en-US) — Цвет будет меняться при нажатии клавиши на клавиатуре, причём keypress ссылается на обычное нажатие (нажатие кнопки и последующее её отпускание как одно целое), в то время как keydown и keyup разделяют действия на нажатие клавиши и отпускание, и ссылаются на них соответственно. Обратите внимание, что это не работает, если вы попытаетесь зарегистрировать этот обработчик событий на самой кнопке — его нужно зарегистрировать на объекте window, который представляет все окно браузера.
- btn.onmouseover (en-US) и btn.onmouseout (en-US) — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.
Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать onplay (en-US) только для определённых элементов, таких как ).
Встроенные обработчики событий — не используйте их
Самый ранний из введённых в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):
button onclick="bgChange()">Press mebutton>
function bgChange() const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; >
Примечание: вы можете найти полный исходник кода из этого примера на GitHub (также взгляните на его выполнение).
Значение атрибута — это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:
button onclick="alert('Hello, this is my old-fashioned event handler!');"> Press me button>
Для многих свойств обработчика событий существуют эквиваленты в виде атрибутов HTML. Однако, не рекомендуется их использовать — это считается плохой практикой. Использование атрибутов для регистрации обработчика событий кажется простым и быстрым методом, но такое описание обработчиков также скоро становится неудобным и неэффективным.
Более того, не рекомендуется смешивать HTML и JavaScript файлы, так как в дальнейшем такой код становится сложнее с точки зрения обработки (парсинга). Лучше держать весь JavaScript в одном месте. Также, если он находится в отдельном файле, вы можете применить его к нескольким документам HTML.
Даже при работе только в одном файле использование встроенных обработчиков не является хорошей идеей. Ладно, если у вас одна кнопка, но что, если у вас их 100? Вам нужно добавить в файл 100 атрибутов; обслуживание такого кода очень быстро превратится в кошмар. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице независимо от того, сколько их было.
const buttons = document.querySelectorAll("button"); for (var i = 0; i buttons.length; i++) buttons[i].onclick = bgChange; >
Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList , можно воспользоваться встроенным методом forEach() (en-US) :
.forEach(function (button) button.onclick = bgChange; >);
Примечание: Разделение логики вашей программы и вашего контента также делает ваш сайт более дружественным к поисковым системам.
Функции addEventListener() и removeEventListener()
Новый тип механизма событий определён в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener() . Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:
var btn = document.querySelector("button"); function bgChange() var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; > btn.addEventListener("click", bgChange);
Примечание: вы можете найти исходный код из этого примера на GitHub (также взгляните на его выполнение).
Внутри функции addEventListener() мы указываем два параметра — имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ. Обратите внимание, что будет целесообразно поместить весь код внутри функции addEventListener() в анонимную функцию, например:
.addEventListener("click", function () var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; >);
Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener() , которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:
.removeEventListener("click", bgChange);
Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.
Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:
.onclick = functionA; myElement.onclick = functionB;
Поскольку вторая строка будет перезаписывать значение onclick , установленное первой. Однако, если:
.addEventListener("click", functionA); myElement.addEventListener("click", functionB);
Обе функции будут выполняться при щелчке элемента.
Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: Метод EventTarget.addEventListener() и Метод EventTarget.removeEventListener().
Какой механизм мне использовать?
Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.
Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей
- Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
- События уровня 2 DOM ( addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.
Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener() , и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener(‘click’, function() <. >) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:
.onclick = function1; element.onclick = function2; etc.
Примечание: Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашем проекте, вы можете столкнуться с трудностями, так как такие старые браузеры используют старые модели событий из более новых браузеров. Но не бойтесь, большинство библиотек JavaScript (например, jQuery ) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этапе вашего учебного путешествия.
Другие концепции событий
Рассмотрим некоторые современные концепции, имеющие отношение к событиям. На данный момент не обязательно понимать их полностью, но представление о них поможет лучше понять некоторые модели кода, с которыми вы, вероятно, столкнётесь.
Объекты событий
Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event , evt или просто e . Называется он объектом события и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:
function bgChange(e) var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; e.target.style.backgroundColor = rndCol; console.log(e); > btn.addEventListener("click", bgChange);
Примечание: вы можете найти исходник кода для этого примера на GitHub (также взгляните на его выполнение).
Итак в коде выше мы включаем объект события e в функцию, а в функции — настройку стиля фона для e.target , который является кнопкой. Свойство объекта события target всегда является ссылкой на элемент, с которым только что произошло событие. Поэтому в этом примере мы устанавливаем случайный цвет фона на кнопке, а не на странице.
Примечание: Вместо e / evt / event можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. e / evt / event чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.
e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target , вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаём 16 элементов с использованием JavaScript. Затем мы выберем все из них, используя document.querySelectorAll() , и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:
var divs = document.querySelectorAll("div"); for (var i = 0; i divs.length; i++) divs[i].onclick = function (e) e.target.style.backgroundColor = bgChange(); >; >
Результат выглядит следующим образом (попробуйте щёлкнуть по нему):
doctype html> html> head> meta charset="utf-8" /> title>Useful event target exampletitle> style> div background-color: #ff6600; height: 100px; width: 25%; float: left; > style> head> body> script> for (var i = 1; i 16; i++) var myDiv = document.createElement("div"); document.body.appendChild(myDiv); > function random(number) return Math.floor(Math.random() * number); > function bgChange() var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; return rndCol; > var divs = document.querySelectorAll("div"); for (var i = 0; i divs.length; i++) divs[i].onclick = function (e) e.target.style.backgroundColor = bgChange(); >; > script> body> html>
Большинство обработчиков событий, с которыми вы столкнулись, имеют только стандартный набор свойств и функций (методов), доступных для объекта события (см. Event для ссылки на полный список). Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимо выполнять. Например, Media Recorder API (en-US) имеет событие, доступное для данных, которое срабатывает, когда записано какое-либо аудио или видео и доступно для выполнения чего-либо (например, для сохранения или воспроизведения). Соответствующий объект события ondataavailable handler имеет свойство данных, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к нему доступ и что-то сделать с ним.
Предотвращение поведения по умолчанию
Иногда бывают ситуации, когда нужно остановить событие, выполняющее то, что оно делает по умолчанию. Наиболее распространённым примером является веб-форма, например, пользовательская форма регистрации. Когда вы вводите данные и нажимаете кнопку отправки, естественное поведение заключается в том, что данные должны быть отправлены на указанную страницу на сервере для обработки, а браузер перенаправляется на страницу с сообщением об успехе (или остаться на той же странице, если другое не указано).
Но если пользователь отправил данные не правильно, как разработчик, вы хотите остановить отправку на сервер и выдать сообщение об ошибке с информацией о том, что не так и что нужно сделать. Некоторые браузеры поддерживают функции автоматической проверки данных формы, но, поскольку многие этого не делают, вам не следует полагаться на них и выполнять свои собственные проверки валидации. Давайте посмотрим на простой пример.
Простая форма HTML, в которой требуется ввести ваше имя и фамилию:
form> div> label for="fname">Имя: label> input id="fname" type="text" /> div> div> label for="lname">Фамилия: label> input id="lname" type="text" /> div> div> input id="submit" type="submit" /> div> form> p>p>
div margin-bottom: 10px; >
В JavaScript мы реализуем очень простую проверку внутри обработчика события onsubmit (событие «отправить» запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию preventDefault() объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:
var form = document.querySelector("form"); var fname = document.getElementById("fname"); var lname = document.getElementById("lname"); var submit = document.getElementById("submit"); var para = document.querySelector("p"); form.onsubmit = function (e) if (fname.value === "" || lname.value === "") e.preventDefault(); para.textContent = "Оба поля должны быть заполнены!"; > >;
Очевидно, что это довольно слабая проверка формы — это не помешает пользователю отправить форму с пробелами или цифрами, введёнными в поля, но для примера подходит. Вывод выглядит следующим образом:
Примечание: чтобы увидеть исходный код, откройте preventdefault-validation.html (также запустите здесь).
Всплытие и перехват событий
Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймёте, как работает следующий механизм. Всплытие и перехват событий — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример show-video-box.html в одной вкладке и исходный код в другой вкладке. Он также представлен ниже:
doctype html> html> head> meta charset="utf-8" /> title>Show video box exampletitle> style> div position: absolute; top: 50%; transform: translate(-50%, -50%); width: 550px; height: 420px; border-radius: 10px; background-color: #eee; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4) ); > .hidden left: -50%; > .showing left: 50%; > div video display: block; width: 400px; margin: 50px auto; > style> head> body> button>Display videobutton> div class="hidden"> video> source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4" /> source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm" /> p> Your browser doesn't support HTML5 video. Here is a a href="rabbit320.mp4">link to the videoa> instead. p> video> div> script> var btn = document.querySelector("button"); var videoBox = document.querySelector("div"); var video = document.querySelector("video"); btn.onclick = function () displayVideo(); >; function displayVideo() if (videoBox.getAttribute("class") === "hidden") videoBox.setAttribute("class", "showing"); > > videoBox.addEventListener("click", function () videoBox.setAttribute("class", "hidden"); >); video.addEventListener("click", function () video.play(); >); script> body> html>
Это довольно простой пример, который показывает и скрывает с элементом внутри него:
button>Display videobutton> div class="hidden"> video> source src="rabbit320.mp4" type="video/mp4" /> source src="rabbit320.webm" type="video/webm" /> p> Your browser doesn't support HTML5 video. Here is a a href="rabbit320.mp4">link to the videoa> instead. p> video> div>
div position: absolute; top: 50%; transform: translate(-50%,-50%); . > .hidden left: -50%; > .showing left: 50%; >
var btn = document.querySelector("button"); btn.onclick = function () videoBox.setAttribute("class", "showing"); >;
Затем мы добавляем ещё пару обработчиков событий onclick. Первый к , а второй к . Идея заключается в том, чтобы при щелчке по области вне зоны видео поле снова скрылось, а при клике в области видео начало воспроизводиться.
var videoBox = document.querySelector("div"); var video = document.querySelector("video"); videoBox.onclick = function () videoBox.setAttribute("class", "hidden"); >; video.onclick = function () video.play(); >;
Но есть проблема: когда вы нажимаете на видео, оно начинает воспроизводиться, но одновременно вызывает скрытие . Это связано с тем, что видео находится внутри , это часть его, поэтому нажатие на видео фактически запускает оба вышеуказанных обработчика событий.
Всплытие и перехват событий — концепция выполнения
На стадии захвата происходит следующее:
- Браузер проверяет, имеет ли самый внешний элемент ( ) обработчик события onclick , зарегистрированный на нем на этапе захвата и запускает его, если это так.
- Затем он переходит к следующему элементу внутри и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента, на который на самом деле нажали.
На стадии всплытия происходит полная противоположность:
- Браузер проверяет, имеет ли элемент, который был фактически нажат, обработчик события onclick , зарегистрированный на нем в фазе всплытия, и запускает его, если это так.
- Затем он переходит к следующему непосредственному родительскому элементу и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента .
(Нажмите на изображение, чтобы увеличить диаграмму)
В современных браузерах по умолчанию все обработчики событий регистрируются в фазе всплытия. Итак, в нашем текущем примере, когда вы нажимаете видео, событие click вызывается из элемента наружу, в элемент . По пути:
- Он находит обработчик video.onclick. и запускает его, поэтому видео сначала начинает воспроизводиться.
- Затем он находит обработчик videoBox.onclick. и запускает его, поэтому видео также скрывается.
Исправление проблемы с помощью stopPropagation()
Чтобы исправить это раздражающее поведение, стандартный объект события имеет функцию, называемую stopPropagation() , которая при вызове в обработчике событий объекта делает так, чтобы обработчик выполнялся, но событие не всплывало дальше по цепочке, поэтому не будут запускаться другие обработчики.
Поэтому мы можем исправить нашу текущую проблему, изменив вторую функцию-обработчик в предыдущем блоке кода:
.onclick = function (e) e.stopPropagation(); video.play(); >;
Вы можете попробовать создать локальную копию show-video-box.html и попробовать его самостоятельно исправить или просмотреть исправленный результат в show-video-box-fixed.html (также см. исходный код здесь).
Примечание: Зачем беспокоиться как с захватом, так и с всплыванием? Что ж, в старые добрые времена, когда браузеры были менее совместимы, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только всплывающие события. Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, они в итоге получили эту систему, которая включала в себя и то, и другое, что реализовано в одном из современных браузеров.
Примечание: Как упоминалось выше, по умолчанию все обработчики событий регистрируются в фазе всплытия и это имеет смысл в большинстве случаев. Если вы действительно хотите зарегистрировать событие в фазе захвата, вы можете сделать это, зарегистрировав обработчик с помощью addEventListener() и установив для третьего дополнительного свойства значение true .
Делегирование события
Всплытие также позволяет нам использовать делегирование событий. Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определённый код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить обработчик событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать обработчик событий на каждом дочернем элементе.
-
и он будет всплывать в элементах списка.
Эту концепцию объясняет в своём блоге Дэвид Уолш, где приводит несколько примеров. (см. How JavaScript Event Delegation Works.)
Вывод
Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера (Web API).
Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнёт приходить более ясное понимание тематики.
Если у вас возникли вопросы, попробуйте прочесть статью снова или обратитесь за помощью к нам.
Смотрите также
- Event order (обсуждение захвата и всплытий) — превосходно детализированная часть от Peter-Paul Koch.
- Event accessing (discussing of the event object) — another excellently detailed piece by Peter-Paul Koch.
- Event reference
- Назад
- Обзор: Building blocks
- Далее
В этом модуле
- Принятие решений в вашем коде — условные конструкции
- Зацикливание кода
- Функции — Переиспользуемые блоки кода
- Создайте свою собственную функцию
- Возвращаемое значение функции
- Введение в события
- Создание галереи
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Понять какой объект вызвал событие
Понимать это не нужно =\ А вот форму по onclick отправлять это интересно зачем. А если он(юзверь) по Enter»у будет форму отправлять? Ещё и это отдельно обрабатывать? Бредово как-то.
20 янв 2013 в 7:56
Попробуйте навешать обработчик клика на сами кнопки и при клике вызывать сабмит формы. Тогда можно определить нажатую кнопку передав в обработчик переменную e например. Тогда e.target будет ссылаться на нажатую кнопку.
20 янв 2013 в 8:01
Пол поводу var_dump hashcode.ru/questions/185057/эквивалент-var_dump-в-javascript
20 янв 2013 в 8:04
7 ответов 7
Сортировка: Сброс на вариант по умолчанию
Может как-нибудь так:
Отслеживать
ответ дан 25 янв 2013 в 6:47
psyсho_Octopus psyсho_Octopus
1,062 1 1 золотой знак 11 11 серебряных знаков 19 19 бронзовых знаков
function Название функции([Объект event]) < // . >Элемент, вызвавший событие, доступен внутри функции через указатель this . Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery . Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event . Напишем обработчик щелчка мыши для двух элементов сразу. При нажатии выведем название тега в элементе с идентификатором divl .
$("р, div").click(function(е) < $("#divl") .append("Элемент " + e.srcElement.tagName + "
"); >); Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 20 янв 2013 в 8:25
6,148 13 13 серебряных знаков 15 15 бронзовых знаков
Спасибо. Это здорово, конечно. Но у меня $(‘#searchForm’).bind( ‘submit’, function(e) < alert(e.srcElement.tagName); . Всегда выкинет "FORM". Т.к. я сабмит ловлю. Вопрос в том, можно ли понять кто вызвал этот сабмит?
20 янв 2013 в 8:38
с чего вдруг FORM выкинет?
20 янв 2013 в 8:55
Ну вот так.. Видимо потому что слушается событие submit для #searchForm (у меня это
20 янв 2013 в 10:16
аа понял) а если ловть событе onClick? или вам етот вариант неподходит?
20 янв 2013 в 11:08
Не подходит. Сделал вот как вообщем: К форме добавил скрытое поле и обрабатываю onclick для кнопок. Если 1я, то одно значение скрытой переменной на сервер летит, ну и. дальше понятно. Если по Enter’y форму отправляют, то значение по умолчанию — будто 1ю кнопку нажали. Ничего лучше мой мозг не выдал.
Как называется объект который вызвал событие
События сигнализируют системе о том, что произошло определенное действие. И если нам надо отследить эти действия, то как раз мы можем применять события.
Например, возьмем следующий класс, который описывает банковский счет:
class Account < // сумма на счете public int Sum < get; private set; >// в конструкторе устанавливаем начальную сумму на счете public Account(int sum) => Sum = sum; // добавление средств на счет public void Put(int sum) => Sum += sum; // списание средств со счета public void Take(int sum) < if (Sum >= sum) < Sum -= sum; >> >
В конструкторе устанавливаем начальную сумму, которая хранится в свойстве Sum. С помощью метода Put мы можем добавить средства на счет, а с помощью метода Take, наоборот, снять деньги со счета. Попробуем использовать класс в программе — создать счет, положить и снять с него деньги:
Account account = new Account(100); account.Put(20); // добавляем на счет 20 Console.WriteLine($"Сумма на счете: "); account.Take(70); // пытаемся снять со счета 70 Console.WriteLine($"Сумма на счете: "); account.Take(180); // пытаемся снять со счета 180 Console.WriteLine($"Сумма на счете: ");
Сумма на счете: 120 Сумма на счете: 50 Сумма на счете: 50
Все операции работают как и положено. Но что если мы хотим уведомлять пользователя о результатах его операций. Мы могли бы, например, для этого изменить метод Put следующим образом:
public void Put(int sum) < Sum += sum; Console.WriteLine($"На счет поступило: "); >
Казалось, теперь мы будем извещены об операции, увидев соответствующее сообщение на консоли. Но тут есть ряд замечаний. На момент определения класса мы можем точно не знать, какое действие мы хотим произвести в методе Put в ответ на добавление денег. Это может вывод на консоль, а может быть мы захотим уведомить пользователя по email или sms. Более того мы можем создать отдельную библиотеку классов, которая будет содержать этот класс, и добавлять ее в другие проекты. И уже из этих проектов решать, какое действие должно выполняться. Возможно, мы захотим использовать класс Account в графическом приложении и выводить при добавлении на счет в графическом сообщении, а не консоль. Или нашу библиотеку классов будет использовать другой разработчик, у которого свое мнение, что именно делать при добавлении на счет. И все эти вопросы мы можем решить, используя события.
Определение и вызов событий
События объявляются в классе с помощью ключевого слова event , после которого указывается тип делегата, который представляет событие:
delegate void AccountHandler(string message); event AccountHandler Notify;
В данном случае вначале определяется делегат AccountHandler, который принимает один параметр типа string. Затем с помощью ключевого слова event определяется событие с именем Notify, которое представляет делегат AccountHandler. Название для события может быть произвольным, но в любом случае оно должно представлять некоторый делегат.
Определив событие, мы можем его вызвать в программе как метод, используя имя события:
Notify("Произошло действие");
Поскольку событие Notify представляет делегат AccountHandler, который принимает один параметр типа string — строку, то при вызове события нам надо передать в него строку.
Однако при вызове событий мы можем столкнуться с тем, что событие равно null в случае, если для его не определен обработчик. Поэтому при вызове события лучше его всегда проверять на null. Например, так:
if(Notify !=null) Notify("Произошло действие");
Notify?.Invoke("Произошло действие");
В этом случае поскольку событие представляет делегат, то мы можем его вызвать с помощью метода Invoke() , передав в него необходимые значения для параметров.
Объединим все вместе и создадим и вызовем событие:
class Account < public delegate void AccountHandler(string message); public event AccountHandler? Notify; // 1.Определение события public Account(int sum) =>Sum = sum; public int Sum < get; private set; >public void Put(int sum) < Sum += sum; Notify?.Invoke($"На счет поступило: "); // 2.Вызов события > public void Take(int sum) < if (Sum >= sum) < Sum -= sum; Notify?.Invoke($"Со счета снято: "); // 2.Вызов события > else < Notify?.Invoke($"Недостаточно денег на счете. Текущий баланс: "); ; > > >
Теперь с помощью события Notify мы уведомляем систему о том, что были добавлены средства и о том, что средства сняты со счета или на счете недостаточно средств.
Добавление обработчика события
С событием может быть связан один или несколько обработчиков. Обработчики событий — это именно то, что выполняется при вызове событий. Нередко в качестве обработчиков событий применяются методы. Каждый обработчик событий по списку параметров и возвращаемому типу должен соответствовать делегату, который представляет событие. Для добавления обработчика события применяется операция += :
Notify += обработчик события;
Определим обработчики для события Notify, чтобы получить в программе нужные уведомления:
Account account = new Account(100); account.Notify += DisplayMessage; // Добавляем обработчик для события Notify account.Put(20); // добавляем на счет 20 Console.WriteLine($"Сумма на счете: "); account.Take(70); // пытаемся снять со счета 70 Console.WriteLine($"Сумма на счете: "); account.Take(180); // пытаемся снять со счета 180 Console.WriteLine($"Сумма на счете: "); void DisplayMessage(string message) => Console.WriteLine(message);
В данном случае в качестве обработчика используется метод DisplayMessage, который соответствует по списку параметров и возвращаемому типу делегату AccountHandler. В итоге при вызове события Notify?.Invoke() будет вызываться метод DisplayMessage, которому для параметра message будет передаваться строка, которая передается в Notify?.Invoke() . В DisplayMessage просто выводим полученное от события сообщение, но можно было бы определить любую логику.
Если бы в данном случае обработчик не был бы установлен, то при вызове события Notify?.Invoke() ничего не происходило, так как событие Notify было бы равно null.
Консольный вывод программы:
На счет поступило: 20 Сумма на счете: 120 Со счета снято: 70 Сумма на счете: 50 Недостаточно денег на счете. Текущий баланс: 50 Сумма на счете: 50
Теперь мы можем выделить класс Account в отдельную библиотеку классов и добавлять в любой проект.
Добавление и удаление обработчиков
Для одного события можно установить несколько обработчиков и потом в любой момент времени их удалить. Для удаления обработчиков применяется операция -= . Например:
Account account = new Account(100); account.Notify += DisplayMessage; // добавляем обработчик DisplayMessage account.Notify += DisplayRedMessage; // добавляем обработчик DisplayRedMessage account.Put(20); // добавляем на счет 20 account.Notify -= DisplayRedMessage; // удаляем обработчик DisplayRedMessage account.Put(50); // добавляем на счет 50 void DisplayMessage(string message) => Console.WriteLine(message); void DisplayRedMessage(string message) < // Устанавливаем красный цвет символов Console.ForegroundColor = ConsoleColor.Red; Console.WriteLine(message); // Сбрасываем настройки цвета Console.ResetColor(); >
На счет поступило: 20 На счет поступило: 20 На счет поступило: 50
В качестве обработчиков могут использоваться не только обычные методы, но также делегаты, анонимные методы и лямбда-выражения. Использование делегатов и методов:
Account acc = new Account(100); // установка делегата, который указывает на метод DisplayMessage acc.Notify += new Account.AccountHandler(DisplayMessage); // установка в качестве обработчика метода DisplayMessage acc.Notify += DisplayMessage; // добавляем обработчик DisplayMessage acc.Put(20); // добавляем на счет 20 void DisplayMessage(string message) => Console.WriteLine(message);
В данном случае разницы между двумя обработчиками никакой не будет.
Установка в качестве обработчика анонимного метода:
Account acc = new Account(100); acc.Notify += delegate (string mes) < Console.WriteLine(mes); >; acc.Put(20);
Установка в качестве обработчика лямбда-выражения:
Account account = new Account(100); account.Notify += message => Console.WriteLine(message); account.Put(20);
Управление обработчиками
С помощью специальных акссесоров add/remove мы можем управлять добавлением и удалением обработчиков. Как правило, подобная функциональность редко требуется, но тем не менее мы ее можем использовать. Например:
class Account < public delegate void AccountHandler(string message); AccountHandler? notify; public event AccountHandler Notify < add < notify += value; Console.WriteLine($"добавлен"); > remove < notify -= value; Console.WriteLine($"удален"); > > public Account(int sum) => Sum = sum; public int Sum < get; private set; >public void Put(int sum) < Sum += sum; notify?.Invoke($"На счет поступило: "); // 2.Вызов события > public void Take(int sum) < if (Sum >= sum) < Sum -= sum; notify?.Invoke($"Со счета снято: "); // 2.Вызов события > else < notify?.Invoke($"Недостаточно денег на счете. Текущий баланс: "); ; > > >
Теперь опредление события разбивается на две части. Вначале просто определяется переменная делегата, через которую мы можем вызывать связанные обработчики:
AccountHandler notify;
Во второй части определяем акссесоры add и remove. Аксессор add вызывается при добавлении обработчика, то есть при операции +=. Добавляемый обработчик доступен через ключевое слово value . Здесь мы можем получить информацию об обработчике (например, имя метода через value.Method.Name) и определить некоторую логику. В данном случае для простоты просто выводится сообщение на консоль:
add < notify += value; Console.WriteLine($"добавлен"); >
Блок remove вызывается при удалении обработчика. Аналогично здесь можно задать некоторую дополнительную логику:
remove < notify -= value; Console.WriteLine($"удален"); >
Внутри класса событие вызывается также через переменную notify. Но для добавления и удаления обработчиков в программе используется как раз Notify:
Account acc = new Account(100); acc.Notify += DisplayMessage; // добавляем обработчик DisplayMessage acc.Put(20); // добавляем на счет 20 acc.Notify -= DisplayMessage; // удаляем обработчик DisplayMessage acc.Put(20); // добавляем на счет 20 void DisplayMessage(string message) => Console.WriteLine(message);
Консольный вывод программы:
DisplayMessage добавлен На счет поступило: 20 DisplayMessage удален
Передача данных события
Нередко при возникновении события обработчику события требуется передать некоторую информацию о событии. Например, добавим и в нашу программу новый класс AccountEventArgs со следующим кодом:
class AccountEventArgs < // Сообщение public string Message// Сумма, на которую изменился счет public int Sum public AccountEventArgs(string message, int sum) < Message = message; Sum = sum; >>
Данный класс имеет два свойства: Message — для хранения выводимого сообщения и Sum — для хранения суммы, на которую изменился счет.
Теперь применим класс AccoutEventArgs, изменив класс Account следующим образом:
class Account < public delegate void AccountHandler(Account sender, AccountEventArgs e); public event AccountHandler? Notify; public int Sum < get; private set; >public Account(int sum) => Sum = sum; public void Put(int sum) < Sum += sum; Notify?.Invoke(this, new AccountEventArgs($"На счет поступило ", sum)); > public void Take(int sum) < if (Sum >= sum) < Sum -= sum; Notify?.Invoke(this, new AccountEventArgs($"Сумма снята со счета", sum)); > else < Notify?.Invoke(this, new AccountEventArgs("Недостаточно денег на счете", sum)); >> >
По сравнению с предыдущей версией класса Account здесь изменилось только количество параметров у делегата и соответственно количество параметров при вызове события. Теперь делегат AccountHandler в качестве первого параметра принимает объект, который вызвал событие, то есть текущий объект Account. А в качестве второго параметра принимает объект AccountEventArgs, который хранит информацию о событии, получаемую через конструктор.
Теперь изменим основную программу:
Account acc = new Account(100); acc.Notify += DisplayMessage; acc.Put(20); acc.Take(70); acc.Take(150); void DisplayMessage(Account sender, AccountEventArgs e) < Console.WriteLine($"Сумма транзакции: "); Console.WriteLine(e.Message); Console.WriteLine($"Текущая сумма на счете: "); >
По сравнению с предыдущим вариантом здесь мы только изменяем количество параметров и их использования в обработчике DisplayMessage. Благодаря первому параметру в методе можно получить информацию об отправителе события — счете, с которым производится операция. А через второй параметр можно получить инфомацию о состоянии операции.
Как называется объект который вызвал событие
Возвращает строку со значением атрибута name объекта.
objectName.name
frameRef.name
frameRef.frames.name
radioName[index].name
selectName.options.name
windowRef.name
windowRef.frames.nаmе
Применение
Атрибут этого свойства зависит от объекта. Он может быть изменен в любой момент.Это свойство ссылается на внутренние имена объектов button, reset и submit, а не на подписи кнопок.Например, после открытия нового окна с помощью:
indexOutline = window.open(‘http://www.dvgu.ru/outline.htrnl»,»MenuPage»)
и выполнения команды
document. write (indexOutline. name)
JavaScript вернет строку «MenuName» , то есть присвоенное окну имя. У всех переключателей в группе имена одинаковы, каждый из них идентифицируется своей позицией.
Связанные элементы
Свойство объектов button, checkbox, frame, password, radio, reset, select, submit, text, textarea и window.
См. свойство value.
Содержит информацию о броузере на клиентском компьютере. navigator
Применение
Объект navigator возвращает информацию о броузере, такую как имя и версия броузера. Одно из основных применений этого объекта состоит в определении платформы, используемой на клиентском компьютере, для учета особенностей конкретного броузера, подобных обработке символа новой строки или генерации случайных чисел. function UnixMachine() <
(navigator.appVersion.lastIndexOf(‘Unix’) !=-1 return true
else
return false
>
Событие происходит в тот момент, когда элемент формы select, text или textarea теряет фокус.
Применение
Событие потери фокуса (blur) может использоваться для проверки корректности ввода данных пользователем. Зтот обработчик события отличается от обработчика onChange, который вызывается только в случае изменения значения поля.
Связанные элементы
Обработчик событий для объектов select, text, textarea.
См. методы focus и blur.
См. обработчики событий onChange и onFocus.
Событие происходит в тот момент, когда значение элемента формы select, text или textarea изменилось и элемент потерял фокус.
Применение
Зтот обработчик особенно полезен для проверки корректности ввода данных пользователем.
Cвязанные элемвнты
Обработчик событии для объектов Select text textarea
См, обработчики событий onBlur и onFocus onClick (Обработчик события)
Вызывается после щелчка левой кнопкой мыши на объекте
Событие происходит в тот момент, когда пользователь перехoдит к элементу формы select, text или textarea ввода данных.
Применение
Злемент формы получает фокус в тот момент, когда пользователь переходит к этому элементу формы с помощью клавиш Tab или щелчка мыши. Выделение символов внутри поля при водит к вызову обработчика события onSelect.Одним из применений обработчика on Focus является вывод на экран всплывающей подсказки, когда элемент выбирается первый раз.
Связанные элементы
Обработчик событий для объектов select, text, textarea.
См. обработчики событий onBlur и onChange.
Вызывается, когда загрузка документа в окно или в кадр закончена.
Применение
Событие load возникает в тот момент, когда броузер заканчивает загрузку окна или всех кадров внутри тега .
Связанные элементы
Обработчик событий для объекта window.
См. обработчик события onUnload.
Обработчик события 0nSelect вызывается в тот момент, когда выделен текст внутри элемента формы.
Применение
Событие select вызывается выбором части или всего текста в объектах text или textarea.
Связанные элементы
Обработчик событий для объектов text и textarea.
Событие происходит в момент щелчка мышью на кнопке Subm’ для посылки данных формы на сервер.
Применение
Обработчик события onSubmit запускается в момент от правки пользователем данных формы на сервер. Любое отличное от false возвращаемое значение, в том числе пропуск оператора return, приводит к отправке данных на сервер. Для получения более ясного кода рекомендуется вставлять оператор return в обоих случаях.
function feedbackSubmit () . сроки кода.
if (!validData) <
return true >
else return false; >
>
Связанные элементы
Обработчик событий для объекта form.
См. объект st.htm#submit.
См. метод submit. onUnload (Обработчик события)
Вызывается, когда пользователь выходит из документа.
Применение
Когда несколько событий unload включено в иерархию кадров, порядок операций – от дочернего к родительскому. Например, событие unload включено в два документа и родительский тег , которыи загрузил их. Когда дочерний документ изменяется, его событие unload обрабатывается, но событие unload тега не происходит. Когда пользователь выбирает опцию, заменяющую родительский документ на новый источник, событие unload самого верхнего уровня будет обработано.
Связанные элементы
Обработчик события объекта window.
См. обработчик события onLoad.
Создает новый документ или экземпляр окна.
document.open([MIMEtype])
window.open(«URL», «windowName» («windowFeatures»)
Применение
Для документа метод open открывает поток вывода для метoдов write или writeln. Eсли тип MIME является версие text или image (например text/html или image/gif) документ будет открыт для показа. Иначе поток будет направлен в plug–in. Eсли документ уже существует в целевом окне, метод open очищает это окно. Поток закрывается помощью метода document.close () .
Для окна метод open открывает новое окно броузера, подобно выбору пункта меню File -> New Web Browser броузера. Пр использовании аргумента URL метод загружает в новое окнo документ; в противном случае новое окно остается пустым. При использовании метода в программе обработки событи форма должна включать объект window; в противном случа подразумевается обьект dncument.
Параметр windowFeatures описывается в виде разделенного запятыми списка параметров, где =1 или =yes – включено и =0 или =no – отключено. windowFeatures включают управление выводом инструментальной панели, окна URL, кнопок каталогов, строки состояния, строки меню, полос прокрутки, возможностью изменения размеров, сохранением истории навигации, шириной и высотой.
Связанные элементы
Метод обьектов document и window.
См. методы clear, close, write, и writeln.
Этот массив параметров является свойством элемента формы select. Массив создается с помощью тегов внутри набора тегов .
formName.selectName.options[index]
forms[index].elements[index].options[indех]
Применение
Индекс первого параметра – ноль, второго – 1 и так далее. Более подробная информация содержится в описании объекта select
Связанные элементы
См. объект select. parent (Свойство)
Ссылается на вызывающий документ в текущем кадре, созданном тегом .
parent
parent.frameName
parent.frames[index]
parent.property
Применение
Использование свойства parent дает доступ к другим кадрам, созданным тем же самым тегом . Например, пусть два вызываемых кадра называются index и contents. Тогда кадр index может выводить текст в кадр contents, используя синтаксис:
parent.contents.document.write(«Здесь был Вася»)
Связанные элементы
Свойство объектов document и window. parse (Метод)
Преобразует строку даты типа «Jan 11, 1996» в количество миллисекунд, прошедших с полуночи 1 января 1970 года.
Применение
Эта функция может использоваться для возврата даты на основе значения строки. При передаче строки со временем она возвращает значение времени. Так как parse – статическая функция объекта Date, она вceгда используется как Date.parse () , а не как метод созданного объекта Date. Date.parse (» Jan 11, 1996″);
Today = new Date ();
Date.parse(Today.toLocaleString())
Связанные элементы
Метод обьекта Date.
См. метод UTC.
Применение
Метод parseFloat анализирует строковый аргуме и возвращает число с плавающей точкой, если первый элемент переданной строки – знак «плюс», знак «минус» деcятичное число «е» (основание натурального логарифма) или цифра Если parseFloat сталкивается с недопустимым символом, то метод возвращает значение, основанное на подстроке cле дующей до этого символ, игнорируя вce последующие. Если первый же символ недопустим, parseFloat возвращает одно из двух значений, в зависимости от платформы: Windows – 0, не Windows – NaN.
Связанные элементы
См. методы isNaN, parseInt
Анализирует строковый аргумент и возвращает целое число, основанное на указанной системе счисления.
parseint(string [,radix])
Применение
При параметре radix, равном 10, string преобразовывается в десятичное число, при 8 преобразовывается в восьмеричное и при 16 – в шестнадцатеричное. Значения, большие10, для оснований, превышающих 10, представляются символами от A до F вместо чисел. Использование radix, равного 2, служит для преобразований в двоичные числа. Числа с плавающей запятой будут преобразованы в целые числа. Правила обработки строки идентичны правилам для parseFloat. Ecли radix опущен или система счисления конфликтует с первыми символами, JavaScript использует систему счисления, анализируя первые символы строки.
Символы Система счисления
0 8 (восьмеричная)
0х 16 (шестнадцатеричная)
другие 10(десятичная
Cвязанные элементы
См. методы isNaN, parseFloat
Окно ввода пароля в форме HTML
document.formName.passwordName
document.forms[index].element[index]
Символы пароля маскируются звездочками в целях защиты
Применение
password – текстовое поле, в котором символы, вводимые пользователем, в целях защиты маскируются звездочками.Любые значения по умолчанию, включенные как часть области определения HTML, очищаются при загрузке страницы. Этим предотвращаются намеренные или случайные нарушения защиты. Несмотря на то что свойство defaultValue допустимо для объекта password, оно всегда возвращает нулевое значение.
Возвращаемое значение объекта password может быть программно обработано внутри сценария, однако рекомендуется не использовать литералы (буквенное значение пароля) в тексте сценария из очевидных соображений безопасности.
Связанные элементы
Свойство объекта form.
См. объект text.
См. свойства defaultValue, name и value.
См. методы focus, blur и select.
Извлекает из URL ту его часть, которая содержит путь.
location.pathname
link.pathnarne
links[index].pathname
Применение
Хотя pathname может быть изменено в любое время, всегда безопаснее изменить весь URL сразу, используя свойство href.
Связанные элементы
Свойство объекта form
См. свойства hash, host, hostname, href, port, protocol и search.
Возвращает значение числа пи.
Math.PI
Применение
Значение числа пи приблизительно равно 3.14159. Зто – отношение длины окружности к диаметру.
circumference = 2 * Matti.PI * radius area = Math.PI * Math.pow(radius,2)
Связанные элементы
Свойство объекта Math.
Извлекает из URL номер порта.
location.port
link.port
links[index].port
Применение
Значение порта – подстрока свойства host в свойстве href,
Возвращает основание, возведенное в степень.
Math.pow(argument)
Применение
Многие языки программирования используют оператор ^ для операции возведения в степень. JavaScript имеет для этого собственный метод. Символ ^ используется в JavaScript для выполнения поразрядной операции XOR.
Связанные элементы
Метод объекта Math.
См. методы ехр и log. prompt (Метод)
Отображает диалоговое окно ввода пользователя.
[windowName.]prompt(message[inputDefault])
Применение
Eсли первоначальное значение для inputDefault не определено, диалоговое окно предлагает значение .
var userID = prompt(«Please enter your ID»,&»»;)
Связанные элементы
Метод обьекта window.
См. методы alert и confirm.
Возвращае метод доступа к файлу
location.protocol
link.protocol
links[index].protocol
Применение
Строка, возвращаемая этим свойством, – начальная часть URL до двоеточия включительно. Это та часть URL, которая указывает метод доступа (nttp, ftp и т. п.).
about информация о броузере
ftp протокол загрузки файлов
http протокол передачи гипертекста
mailto адрес электронной почты
news узел новостей
file ссылка на файл на локальной машине
javascript предшествует набору команд JavaScript
Связанные элементы
Свойство объекта form.
См. свойства hash host, hostname, hгef, pathname, port и search.
Набор переключателей.
formName radioName[index]
forms [index].elements[index]
Применение
Объекты radio создаются внутри HTML-тега и представляют собой переключатели. Набор переключателей позволяет пользователю выбирать один элемент из группы. При ссылке на объект с использованием имени переключателя индекс состоит из кнопок с одинаковым свойством namе. При ссылке на переключатель с использованием массива elements каждый переключатель представляет собой отдельный элемент в индексе.
Связанные элементы
Свойство объекта form.
См. объекты сheckbox и select.
См. метод click.
См. обработчик события onClick.
Возвращает случайное число в интервале между 0 и 1 (только для UNIX).
Math.random()
Применение
Метод random реализован только на UNIX-платформах – пользователи Windows и Macintosh должны использовать альтернативную форму генерации случайного числа. Пример такой формы включен в раздел «Примеры применения JavaScript»
Связанные элементы
Метод объекта Math. referrer (Свойство)
URL документа, который привел к текущему документу.
document.referrer
Применение
Возвращает строку только для чтения, содержащую полный URL того документа, который вызвал текущий документ Это свойство может использоваться со сценарием CGI, чтобы отслеживать, как пользователь перешел к текущей странице.
document.write(«document.referrer»)
Связанные элементы
Свойство объекта form.
Кнопка для возвращения всем объектам form значений по умолчанию.
formName.resetButtonName
forms[index].elements[index]
Применение
Этот объект соответствует кнопке Reset, созданной тегом HTML ,в озвращающей все объекты fоrm к их значениям по умолчанию.
Объект reset должен быть создан внутри тега и не может управляться из программы обработки события onClick. При нажатии кнопки все объекты формы возвращаются к их значениям по умолчанию. Однако программа обработки события onClick может в дополнение к восстановлению значений по умолчанию вызывать другие действия.
Связанные элементы
Свойство объекта form.
Cм объекты button, submit
Cм. свойства narne и value.
Cм, метод click.
Cм. обработчик события onClick.
Oкругляет число до ближайшего целого.
Math.round(argument)
Oкругляет аргумент с плавающей точкой до ближайшего большего целого числа, если десятичная часть больше или равна 0.5, или до ближайшего меньшего целого числа, если десятичная часть меньше, чем 0.5.
Math.round (2. 1) // Возвращает 2
Math.round(2. 9) ) // Возвращает 3
Cвязанные элементы
Метод обьекта Маth.