Уроки JavaScript

Мышь: Drag’n’Drop расширенные возможности

Здравствуйте!  В прошлой статье мы рассмотрели основы Drag’n’Drop.  В этой статье я хотел бы  разобрать дополнительные приёмы реализации, которые  могут возникать на практике.

Надо сказать, что почти все javascript-библиотеки реализуют Drag’n’Drop так, как написано.

И конечно зная, что и как, вы  всегда сможете легко написать свой собственный  код переноса или поправить библиотеку под себя.

Данный материал предназначен в первую очередь для усвоения  основ drag’n’drop.

Прочитать больше

Мышь: Drag’n’Drop или перетаскивание элементов на веб-странице

Здравствуйте!  В этом уроке в продолжении темы события мыши мы с вами рассмотрим такое  событие как Drag’n’Drop – это  такая возможность захватить мышью элемент и перенести его на странице. В свое время это было  открытием в области интерфейсов, которое  упрощало  большое количество операций.

Напомню также, что мы с вами уже рассмотрели события мыши клики,  события мыши отмена выделения и события мыши mouseover/out, mouseenter/leave

Перенос мышкой может заменить  последовательность кликов. И,  конечно самое главное, он упрощает внешний вид интерфейса: функции, получаемые через Drag’n’Drop, в противном случае потребовали бы дополнительных полей.

Прочитать больше

События мыши: mouseover/out, mouseenter/leave

Здравствуйте!  В этом уроке мы продолжим разбираться с  событиями мыши и рассмотрим события, которые  возникают при движении мыши mouseover, mouseenter.

Эти события  возбуждаются, когда пользователь двигает мышью или наводит мышь (mouseover), уводит (mouseout) от элемента на веб-странице.

Прочитать больше

События мыши: отмена выделения

Здравствуйте! В продолжении темы «События мыши»  сегодня  я хочу поговорить об отмене выделения текста, когда пользователь 2 раза кликает на текст.  Дело в том, что у кликов мыши есть  одна неприятная особенность.

2-ой клик или нажатие с движением курсора приводят к  выделению текста.

Если вы  желаете  обрабатывать эти все  события сами, то такое выделение –  конечно некрасиво и неудобно. В этом уроке  мы с вами  разберем основные способы, как сделать элемент, чтобы он не выделялся.

Прочитать больше

События мыши: клики, кнопка, координаты

Здравствуйте! В этой статье в продолжении темы «События в JavaScript»  я хотел бы  мы глубже разобраться со списком событий мыши, рассмотреть их общие свойства, а также те события, которые связаны с кликом мыши.  Ведь когда пользователь кликает на каком то элементе, то на самом деле происходят 2 события mousedown и mouseup.  Ну и также еще имеется ряд нюансов при работе с мышью.

Прочитать больше

Отмена действий браузера по умолчанию

Здравствуйте! В этом уроке я хотел бы рассмотреть такой вопрос, как отмена действий браузера по умолчанию. Дело в том, что  есть некоторые события в браузере за которыми уже закреплены стандартные обработчики и вот они могут срабатывать  вместе с вашими обработчиками, а как сделать так, чтобы эти обработчики по умолчанию не срабатывали. Вот об этом и читайте дальше.

Перечислю основные события браузера по умолчанию:

• Клик по ссылке  — вы переходите на новую страницу, адрес которой указан в атрибуте href.
• Нажатие на кнопку «отправить» в форме –   отсылает данные формы на сервер.
• Двойной клик на тексте –  при этом текст будет выделен.

Так вот, когда вы обрабатывает какое-то из этих событий, то зачастую вам не требуется срабатывание  обработчиков, закрепленных за этими событиями.  Давайте рассмотри как  их отменить можно.

Прочитать больше

Делегирование событий в JavaScript

Здравствуйте! Всплытие событий, которое мы с вами рассматривали в прошлом уроке  позволяет реализовать один из самых я бы сказал  важных приёмов разработки – делегирование.

Делегирование заключается в том, что если у вас есть очень много элементов, события на которых нужно обрабатывать одним и тем же  образом, то вместо того, чтобы назначать обработчик каждому –  вы можете установить один обработчик на их общего родителя. Из него вы  можете получить  элемент event.target, чтобы понять на каком именно потомке произошло событие и соответственно  обработать его.

Прочитать больше

Всплытие и перехват событий

Здравствуйте! В этом уроке я хочу рассказать о таком важном понятии  как всплытие и перехват событий. Всплытие  это такое явление при котором, если вы щелкаете по дочернему элементу, то событие распространяется и на его родитель.

Бывает очень полезно при обработке  больших вложенных списков или таблиц, чтобы не назначать каждому элементу  обработчик события можно назначить  один обработчик на родительский элемент, а событие уже будет распространяться на  все  вложенные элементы в родитель.  Давайте рассмотрим на примере.

Этот обработчик для <div> сработает, если вы кликните по вложенному тегу <em> или <code>:

<div onclick="alert('Обработчик на Div сработал!')">
  <em>Кликните на EM, сработает обработчик на DIV</em>
</div>

Как видите при клике на вложенном элементе em срабатывает обработчик на div. Почему так происходит? Читайте дальше и узнаете.

Прочитать больше

Объект события Event

Здравствуйте! Продолжаем разбираться с событиями в JavaScript  и на очереди у нас собственно объект события (Event).  Как правило при  обработке события браузер  может автоматически передать в функцию обработчика события  в качестве параметра  некий объект Event, который  содержит всю информацию о событии. И с помощью  свойств этого объекта  мы  с вами можем получить эту информацию.

Прочитать больше

Введение в события JavaScript

Здравствуйте! Рассмотрев тему «Работа с DOM в JavaScript», перейдем непосредственно к теме «События в Javascript». Надо сказать, что данная тема является чуть ли не основной для обработки сценариев в браузере.    События нужны, чтобы реагировать на действие пользователя при взаимодействии со страницей.

Событие — это своего рода сигнал браузера о том, что что-то произошло.  Событий существует очень много мы же с вами рассмотрим лишь только основные события.

Прочитать больше