Событие в 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>