События и обработчики событий в JavaScript

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

Что такое событие и обработчики событий

Событие — это некое действие, которое может производить либо пользователь, либо другие объекты на странице.

Самым ярким примером события это клик пользователя по какому-то объекту(click), будь то это кнопка, ссылка или любой другой элемент. Другой пример события, это наведение мыши над каким-то объектом(mouseover), скажем над изображением. Также событием является полное загрузка страницы(load). В общем все действия, которые происходят на сайте являются событиями.

Так вот, мы можем захватить любое событие, которое производится на странице и обрабатывать её с помощью соответствующего обработчика. Например, при наведении мыши на какой-то блок div, мы можем вывести некое сообщение, допустим 'Вы находитесь в текстовой области'. Или, при клике по кнопке скрыть какой-то блок со страницы. В общем, много чего можно сделать пре обработки какого-то события.

И для того чтобы обрабатывать какое-то событие, необходимо использовать специальный обработчик для данного события. Каждое событие имеет свой обработчик, например, у события клик(click) есть обработчик onclick. У события наведения мыши над объектом(mouseover) есть обработчик onmouseover. И у события полной загрузки страницы(load) есть обработчик onload.

То есть как вы поняли название обработчика, формируется из префикса 'on' + название события.

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

Обработчик события вызывается в качестве атрибута, в самом теге HTML элемента. В значение обработчика можно написать сразу код JavaScript, но лучше вызывать какую-то функцию, которая сделает необходимые действия. Функцию необходимо описать внутри тега script, который может находится как внутри блока head, так и в конце тега body. В качестве параметра для этой функции передаётся слово this, то есть текущий объект.

Теперь напишем простой пример. При наведении мыши над блоком с текстом, выведем с помощью метода alert, сообщение о том что пользователь находится внутри текстовой области.

HTML код:

<div onmouseover = "blockOver(this)">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

CSS код:

div{
    padding-left: 50px;
    width: 200px;
    border: 1px solid #000;
}

JavaScript код:

function blockOver(block){
    alert('Вы находитесь в текстовой области ');
}

Сохраняем документ, открываем его в браузере, наводим курсор мыши над текстом и видим результат обработки данного события:

Как получить значение атрибута в javascript ?

С помощью параметра функций (this), можно получить значение какого-то атрибута текущего объекта, например, узнать его id.

Для примера, создадим кнопку и зададим ей id со значением 'justButton'. Когда кликнем на данную кнопку, то выведем такое сообщение: 'Вы кликнули по кнопке, с идентификатором значение_id'. Здесь необходимо уже использовать обработчик onclick.

HTML код:

<p>
    <input type="button" name="button" id="button" value="Простая кнопка" onclick="clickOnButton(this)" />
</p>

JavaScript код:

function clickOnButton(button){
    alert('Вы кликнули по кнопке, с идентификатором: ' + button.id);
}

Сохраняем документ, открываем его в браузере и кликаем по кнопке.

Таким же образом можно вывести имя кнопки(button.name) или её значение(button.value)

Получаем значение ширины и высоты элемента

Ещё можно узнать значения CSS свойства элемента, например, ширину и высоту. Для получения ширины используются свойства clientWidth и offsetWidth, а для высоты clientHeight и offsetHeight. Для примера, выведем значения ширины и высоты кнопки, по которой кликнули.

Теперь содержимое функции clickOnButton будет такой:

function clickOnButton(button){
    //alert('Вы кликнули по кнопке, с идентификатором: ' + button.id);
    var width = button.clientWidth || button.offsetWidth;
    var height = button.clientHeight || button.offsetHeight;

    alert("Ширина кнопки: " + width + "\nВысота кнопки: " + height);
}

Результат данного примера:

Напоминаю, что ширина элемента считается вместе со значением padding, поэтому она и равна 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ].

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

Например, при загрузке страницы можно вывести сообщение о том, что 'страница загружается'. Для этого необходимо использовать событие load и её обработчик onload. Данный обработчик напишем в открывающем теге body.

<body onload="alert('Страница загружается')" >
    <!-- Тело документа -->
</body>

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

Проверка формы на JavaScript

И в конец данной статьи разберём простой пример обработки формы. Обработка формы на JavaScript, во-первых, уменьшает загрузку на сервер и во-вторых придаёт дополнительный плюс к юзабилити сайта.

Форма состоится из одного поля для логина, и кнопки отправить. При отправке формы, будем проверять длину логина. Его длина должна быть больше трёх символов.

Начнём, мы с HTML структуры данной формы.

<form method="GET" name="myform" action="" >

    <p>
        <input type="text" name="login" />
    </p>

    <p>
        <input type="submit" name="send" value="Отправить" />
    </p>
    
</form>

Теперь, тегу формы добавим в качестве атрибута обработчик onsubmit, события submit. Следующим образом:

<form method="GET" name="myform" action="" onsubmit = "return checkForm(this)" >

Событие submit срабатывает при отправке формы. Оператора return мы написали для того чтобы запретить отправку формы, в случае обнаружения ошибки в вводе данных. Если функция вернёт значение false, то значение обработчика onsubmit будет «return false», это значит, что форма не отправиться на сервер. В противном случае, если форма вернёт true, то значение обработчика будет «return true» и форма отправится без проблем.

Иногда бывает необходимо чтобы полностью запретить отправку формы, в таком случае значение обработчика onsubmit будет таким:

onsubmit = "checkForm(this); return false;" 

Как Вы наверняка уже догадались, checkForm это название функции, которая вызовется, когда сработает событие submit. Вы можете назвать её как хотите, следуя правилам наименования функции.

И так, вернёмся к нашему примеру. Теперь нам необходимо описать функцию checkForm. В ней будет такое условие: если длина логина меньше трёх символов, то мы возвращаем false и форма не отправится, в противном случае, если данные были введены правильно, то, мы отправляем форму на сервер.

function checkForm(form){

    //Получаем значение поля формы, у которой name равен login
    var login = form.login.value;

    //Проверяем, если длина логина меньше трёх символов то выводим сообщение об ошибке и отменяем отправку формы.
    if( login.length > 3){
        alert('Длина логина должна быть больше трёх символов');
        return false;
    }else{
        return true;
    }

}

Сохраняем документ, открываем его в браузере и тестируем.

Таким вот образом можно проверить форму на языке JavaScript и отменить её отправку в случае ошибки.

Ну и на этом всё дорогие читатели. Подведём итоги.
События используются очень часто, поэтому Вы должны уметь работать с ними на все 100.

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

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Дата добавления: 2016-11-07 11:16:24