Перехват событий по умолчанию в JavaScript

Статья будет совсем короткой, она даст информацию по методу preventDefault а также о том, как разобрать происходящее событие в JavaScript и что-нибудь с ним сделать. Все функции, связанные с действиями пользователя на клавиатуре или движениями мыши можно отследить. Например, за отслеживание нажатия на клавиатуре кнопки отвечает функция .keypress() (здесь и далее все функции будут только из jQuery). В первой части статьи я рассмотрю предотвращение события. Итак, например, если у нас есть ссылка, по нажатию на которую что-то должно произойти, например, уже не раз упоминавшееся действие «положить товар в корзину». Итак, чтобы предотвратить переход по ссылке достаточно на нее «повесить» обработчик:

	 <script>
	 $(function() {
	       $('a').click(function(event) {
	             event.preventDefault()
	       })
	 })
	 </script>

Обратите внимание, что в аргумент анонимной функции внутри обработчика click() передается переменная event, которая содержит в себе объект события. И вот именно метод preventDefault() перехватывает произошедшее событие и предотвращает его. Таким же образом можно перехватить любое событие происходящее, например, при нажатии кнопки типа submit в html-форме и тому подобное. Если интересно, можно вывести происходящее событие в консоль и посмотреть, какие переменные и методы имеются в его распоряжении. Получится что-то вроде этого:

	 1.   altKey: false
	 2.   bubbles: true
	 3.   button: 0
	 4.   buttons: 0
	 5.   cancelable: true
	 6.   changedTouches: undefined
	 7.   char: undefined
	 8.   charCode: undefined
	 9.   clientX: 63
	 10. clientY: 9
	 11. code: undefined
	 12. ctrlKey: false
	 13. currentTarget: a
	 14. data: null
	 15. …

Ну и много чего еще дальше. Некоторые из этих атрибутов можно использовать для своих нужд. Фантазия тут не ограничена, можете придумывать любые фишки с использованием этих атрибутов. А теперь попробуем отследить нажатие конкретных клавиш на клавиатуре. Здесь нам уже не обязательно использовать функцию preventDefault(), хотя в некоторых случаях она тоже может понадобиться. Например, если вы хотите сделать простенькую JavaScript игру-бродилку, скорее всего вам понадобятся стрелки на клавиатуре, которые также исопльзуются для прокрутки страницы браузера. Приступим, напишем в странице следующий код, который просто выводит в консоль событие, которое происходит при нажатии клавиши клавиатуры:

	 <script>

	 $(function() {

	       $(window).keypress(function(event) {

	             console.log(event)

	       })

	 });

	 </script>

И в этом событии нам будет интересно две переменные: key и keyCode (обратиться к ним можно соответственно как event.key и event.keyCode). В свойстве key содержится то, что написано на кнопке, в keyCode – числовой код кнопки. Первый параметр зависит от раскладки клавиатуры, второй – нет. Интересно, что при нажатии на стрелки на клавиатуре ничего не происходит и соответственно, не выводится в консоль. На самом деле все просто – keypress() не перехватывает событие нажатия на служебные клавиши (такие как Ctrl, Shift и стрелки в т.ч.). Если посмотреть в документацию jQuery, то можно найти событие keydown(). Попробуем заменить на него keypress() в предыдущем примере и ситуация меняется, получаем при нажатии кнопок событие на нажатие любой кнопки. Теперь мы можем перехватить нажатия стрелок на клавиатуре и использовать их в своих целях. Например, можно сделать перемещение блока текста или картинки по странице при нажатии кнопок, или изменение размера шрифта текста и вообще, все что вам взбредет в голову. Если запустить код указанный ниже, что блок текста будет «ползать» по странице по нажатию на стрелку.

	 <script>
	 $(function() {
	       $(window).keydown(function(event) {
	             event.preventDefault()
	            
                 var mvDiv = $('.js-move')
	             if(event.key == 'ArrowUp')
	                   mvDiv.css({top: mvDiv.position().top - 5})
	             if(event.key == 'ArrowDown')
	                   mvDiv.css({top: mvDiv.position().top + 5})
	             if(event.key == 'ArrowLeft')
	                   mvDiv.css({left: mvDiv.position().left - 5})
	             if(event.key == 'ArrowRight')
	                   mvDiv.css({left: mvDiv.position().left + 5})        
	       })
	 });
	 </script>
	 <div class="js-move" style="padding: 20px; border: 1px solid #ccc; position: absolute; top: 0px;left: 0px;">
	 А это ползающий текст
	 </div>
	  

Наверное, пока на этом можно закончить, потому что, еще раз повторюсь, применение описанных в этой страниц методов зависит только от вашей фантазии.