SEO продвижение сайтов

Событие в JavaScript

Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером.

Например:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

События на элементах управления:

  • submit – пользователь отправил форму
  • focus – пользователь фокусируется на элементе, например нажимает на <input type="text" />.

Клавиатурные события:

  • keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:

  • DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

В HTML добаляется on

<input type="button" value="Нажми" onclick="alert('Клик!')">


<button onclick="alert(this.innerHTML)">this. Нажми</button>


<input type="button" value="f1 Привет!" onclick="f1('Гена')">
<script>
  function f1(name) {
      alert(`Привет, ${name}`);
  }
</script>


<input type="button" id="f2" value="f2 Спасибо!">
<script>
  f2.onclick=function() {
    alert('Функция f2');
  };
</script>


<input type="button" id="f3" value="f3 Нажми" onclick="alert('Было')">
<script>
  f3.onclick=function() { // перезапишет существующий обработчик
    alert('Функция f3');        // выведется ТОЛЬКО это
  };
</script>


<input type="button" id="f4" value="f4 Нажми" onclick="alert('Было')">
<script>
	function sayThanks() {
	  alert('Функция f4');
	}
	f4.onclick=sayThanks;
</script>


<input type="button" id="f5" value="f5 Нажми">
<script>
	const b5=document.querySelector('#f5')//Выбор как у CSS - по id
	function f5(e) {
	  alert('f5 Спасибо!');
	  alert(e.target.value);
	}
	b5.addEventListener("click", f5);
</script>


<input type="button" id="f6" value="f6 Нажми"/>
<script>
	function handler2(e) {
	alert(`Спасибо 2 ! ${e.target.value}`);
	};

	function handler3(e) {
	alert(`Спасибо 3 ! ${e.target.value}`);
	}

	f6.onclick=(e) => alert(`Спасибо 1 ! ${e.target.value}`);// Спасибо 1 !
	f6.addEventListener("click", handler2);// Спасибо 2 !
	f6.addEventListener("click", handler3);// Спасибо 3 !
</script>


<script>
	/*
	document.addEventListener("DOMContentLoaded", function() {
	  alert("Страница ЗАГРУЖЕНА - DOM построен!"); // а вот так сработает
	});
	*/
</script>	


<input type="button" id="f7" value="f7 Нажми">
<script>
	f7.onclick=function(event) {
		alert(event.type + " на " + event.currentTarget);
		alert("Координаты: " + event.clientX + ":" + event.clientY);// вывести тип события, элемент и координаты клика
	};
</script>


<input type="button" onclick="alert(event.type)" value="Тип события">


<button id="f8">f8 Нажми</button>
<script>
	f8.addEventListener('click', {
		handleEvent(event) {
			alert(event.type + " на " + event.currentTarget);
		}
	});
</script>


<button id="f9">f9 Нажми</button>
<script>
	class Menu {
	    handleEvent(event) {
	    	switch(event.type) {
		        case 'mousedown':
					f9.innerHTML="Нажата кнопка мыши";
					break;
		        case 'mouseup':
					f9.innerHTML += "...и отжата.";
					break;
	      	}
	    }
	}

	let menu=new Menu();
	f9.addEventListener('mousedown', menu);
	f9.addEventListener('mouseup', menu);
</script>

 

Добавить комментарий


Защитный код
Обновить

Web-технологии

Событие в JavaScript

Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером.

Например:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

События на элементах управления:

  • submit – пользователь отправил форму
  • focus – пользователь фокусируется на элементе, например нажимает на <input type="text" />.
Подробнее...

Универсальный обход по массиву

Предлагаю вашему вниманию PHP-код - универсальный обходчик любого массива с любым представлением. Используем две функции: 1) функция с циклом (метод ArrFor() в классе) и 2) функция (как аргумент) с оформлением результатов обхода по массиву в цикле.

Подробнее...

JavaScript - основы (ES6)

ECMAScript 6 (или ES6) - это новая версия JavaScript 2015г, в которую добавлен новый функционал, которая на сегодня поддерживается всеми современными браузерами.

Переменные и комментарии

JavaScript - не строго типизированный язык. Переменные обозначаются так:

	let name='Геннадий'//Строка
	console.log(name)  //Геннадий - отображается в консоли

	var age=40      //Число(без кавычек) VAR (глобальная) - устарело, не использовать!
	console.log(age)//40 - отображается в консоли

	const prof="Программист"//Это константа
	console.log(prof)//Программист - отображается в консоли

	// - это однострочный комментарий

	/*
		тут 
		многострочные 
		комментарии
	*/

Подробнее...
Интересные статьи

Диалектические противоречия или чего хотят современные женщины

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

Многие женщины, живущие в современном мире, традиционно имеют как минимум два взаимоисключающих убеждения в отношении взаимодействия с мужчинами для создания такого союза.

Подробнее...

Почему мужчинам опасно регистрировать брак в России

Почему мужчинам опасно регистрировать брак в России

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

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

Подробнее...

День Победы со слезами на глазах...

День Победы со слезами на глазах...

Дорогие друзья, вот и прошёл пожалуй самый светлый праздник для нашей страны, для нашего народа - ДЕНЬ ПОБЕДЫ - 9 мая.

Но, как именно прошёл праздник 75-летия ПОБЕДЫ в этом году, я хочу напомнить сегодня, спустя 4 дня от празднования исторической даты.

У меня такое ощущение, как будто никто не заметил, что ПОЛИЦАИ по всей стране в этот день задерживали, арестовывали и штрафовали именно за память о Победе, за возложение цветов к памятникам нашим павшим героям.

Подробнее...

Оставить заявку

Закрыть
Заполните фрму и отправьте нам заяку
Заполните все обязательные поля*
captcha
Перезагрузить