<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Событие AddEventListener

Событие AddEventListener

Напомню, что событие – это реакция браузера на взаимодействие пользователя с элементами сайта, посредством мыши и клавиатуры. Существует три способа, как повесить событие (event) на элемент.

Через обработчик в HTML теге

При клике по кнопке, вызывается функция по её имени.

<button value="Submit" onclick="open()">
<script>
    function open() {
        alert("Клик по кнопке" );
    }
</script>

Этот способ уже давно устарел и не используется программистами в написании кода для реальных проектов. Обработчик onclick жестко прикрепился к кнопке, убрать его оттуда можно только вручную. А что если таких кусков кода много?

Через свойство DOM-объекта

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

<button id="button" value="Submit">
<script>
button.onclick = function() {
    alert( 'Клик по кнопке' );
}
</script>

Но у второго способа есть один большой минус – на элемент можно повесить только один обработчик события.

Эти 2 способа имеют место быть, но они не совершенные. Ну уж третий то способ наверняка хороший – подумает читатель. Иначе, зачем было критиковать первые два, если не ради пиара третьего – addEventListener? Сейчас мы это увидим.

Метод addEventListener

Метод addEventListener лишен недостатков предыдущих двух способов: Для удаления события, не надо взаимодействовать с HTML разметкой, а красиво написать.

function open() {
    alert( 'Привет!' );
}
btn.addEventListener("click", open);
btn.removeEventListener("click", open);

На один элемент с событием можно повесить несколько обработчиков.

<button id="btn" value="Submit">
<script>
function hello1() {
    alert('Hello Vova!');
}
function hello2() {
    alert('Hello Alex!');
}
btn.onclick = function() { alert("Hello"); };
btn.addEventListener("click", hello1); // Hello Vova!
btn.addEventListener("click", hello2); // Hello Alex!
</script>

С помощью addEventListener можно повесить событие на элементы, не являющиеся HTML-элементами – например, окончание анимации и окончание срабатывания transitionend. Это не элемент, его нельзя получить с помощью команды document, но зато можно через addEventListener.

btn.addEventListener("transitionend", function() {
    alert( "это было круто" );
});

Недостатки

В старых браузерах вместо addEventListener, используют другие методы, а вместо click, первым параметром передается onclick.

function name() {
    alert( 'Привет!' );
}
btn.attachEvent("onclick", name) // повесить
btn.detachEvent("onclick", name) // удалить

Практический пример

Смена фона у кнопки:

<button id="button">Try it</button>
<script>
document.getElementById("button").addEventListener("click", function(){
    this.style.backgroundColor = "black";
});
</script>

Язык JavaScript - это целый мир, где можно каждый день узнавать что-то новое и получать удовольствие. Я много раз слышал от людей, изучающих JS по бесплатным урокам и видео: "Я уже целый год смотрю бесплатные видео-уроки, но не знаю как применить свои знания на практике и начать писать код." К сожалению у меня нет кардинально другого рецепта, как ещё по другому можно изучать JS. Но вам стоит наверное задуматься про "бесплатный сыр в мышеловке" и поменять подход, попробовать более качественный продукт мой видеокурс по JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.