betacode

Обработка событий в Javascript

1- Javascript Events

Событие (event) является сигналом того, что что-то произошло. Например, вы нажимаете кнопку (button) или закрываете браузер... Все узлы node e DOM генерируют (generate) такие сигналы, но имеются другие сигналы помимо DOM, например ваше событие закрытия окна браузера.
Ниже является список самых полезных событий DOM:
Mouse Events:
СобытиеОписание
clickСобытие происходит, когда пользователь кликает (click) на элемент (element).
contextmenuСобытие происходит, когда пользователь нажимает на правую кнопку мыши (right-clicks) на элемент, чтобы открыть context-menu.
dblclickСобытие происходит, когда пользователь делает двойное нажатие (double-clicks) на элемент.

mousedownСобытие происходит. когда пользователь нажимает на кнопку мыши над элементом.
mouseupСобытие происходит, когда пользователь отпускает кнопку мыши над элементом.

mouseenterСобытие происходит, когда курсор (pointer) перемещается на элемент.
mouseleaveСобытие происходит, когда курсор (pointer) перемещается из элемента.

mousemoveСобытие происходит, когда курсор перемещается над элементом.

mouseoutСобытие происходит, когда пользователь перемещает курсор из элемента или выходит из одного из его подэлементов.
mouseoverСобытие происходит, когда пользователь перемещает курсор в элемент или заходит в один из его подэлементов.
События элемента Form.
СобытиеОписание
submitКогда пользователь submit (Отправляет) содержание <form>.
focusКогда пользователь фокусируется (focus) на один элемент, например <input>.
blurКогда пользователь выходит из элемента, например <input>.
События клавиши:
СобытиеОписание
keydownСобытие происходит, когда пользователь нажимает на клавишу (key).
keyupСобытие происходит, когда пользователь отпускает клавишу.

keypressСобытие происходит, когда пользователь нажимает (press) на клавишу (Выполнить 2 действия, нажать и отпустить).
События Document.
СобытиеОписание
DOMContentLoadedКога содержание HTML скачано (loaded) и обработано. Модель DOM создана совершенно.
События CSS:
СобытиеОписание
animationstartСобытие происходит, когда начинается процесс анимации CSS.
animationendСобытие происходит, когда завершается процесс анимации CSS.
animationiterationСобытие происходит, когда повторяется процесс анимации CSS.

Обработка событий:

Чтобы обработать событие, вам нужно прикрепить событие обработчику (handler). Обработчик может быть функцией. Когда событие происходит, обработчик будет вызван для работы. Обработчик (handler) - это способ запуска кодов Javascript оответствующих действиям пользователя.
Обработчик (handler) может быть настроен внутри HTML со свойством (attribute) on{event}. Например событие click:


<input value="Click me" onclick="alert('Click!')" type="button">

<input value="Click me" onclick="someFunction()" type="button">
 
Объект this представляет элемент, генерирующий событие.

<input value="Click me" onclick="someFunction(this)" type="button">
Когда происходит событие, Javascript создает объект event и вы можете его использовать как значение параметра.

<input value="Click me" onclick="someFunction(event)" type="button">
 
Вы также можете получить доступ в элемент, генерирующий событие через объект event.

var target =  event.target;

2- Пример с событиями

Простое и часто встречающееся событие - это событие, при котором пользователи кликают (click) на элемент. Ниже приведен простой пример, пользователь кликает на кнопку​​​​​​​ "="​​​​​​​, чтобы сложить 2 числа.
onclick-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function doCalculate()  {
             var a = document.getElementById("a").value; // A String value
             var b = document.getElementById("b").value; // A String value

             var c = Number(a) + Number(b);

             document.getElementById("c").value = c;
         }
      </script>

   </head>
   <body>

      <h3>Click Event example</h3>

      <input id = "a" type="text" value= "100"/> <br/>
      + <br/>
      <input id = "b" type="text" value = "200"/> <br/>

      <button onclick="doCalculate()"> = </button> <br/>

      <input id = "c" type="text" value = ""/>

   </body>
</html>

 
-
Объект this и есть элемент, которое генерирует событие. Вы можете передать (pass) данный объект в функцию обработки событий.
this-obj-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(target)  {
             var random = Math.round(Math.random() * 100) + 200;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Event with 'this' object</h3>

      <button onclick="changeSize(this)">Click Me to Change Size</button>

   </body>
</html>
-
Когда событие происходит, объект event создается ​​​​​​с помощью Javascript, он содержит информацию связанную с событием.  Например, для события мыши объект event может содержать такую информацию, как положение мыши относительно браузера, положение мыши относительно элемента, который генерирует событие,... Вы можете использовать объект​​​​​​​ event для передачи (pass) в функцию обработки событий.

<input value="Click me" onclick="someFunction(event)" type="button">
mouse-events-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="mouse-events-example.js"></script>
    <style>
        .my-div {
            width: 290px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>

    <h3>Mouse Events (Enter, Move, Leave)</h3>

    <div class="my-div"
               onmouseenter="mouseenterHandler(event)"
               onmouseleave="mouseleaveHandler(event)"
               onmousemove="mousemoveHandler(event)">
    </div>

    <h3>Mouse position</h3>
    <div style="color:red;" id="position-div">

    </div>

    <h3>Statistics</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>

</html>

 
mouse-events-example.js

var enterCount = 0;
var moveCount = 0;
var leaveCount = 0;


function mouseleaveHandler(evt) {
    leaveCount += 1;

    showPosition(evt);
    showStatistics();
}

function mouseenterHandler(evt) {
    enterCount += 1;

    showPosition(evt);
    showStatistics();
}

function mousemoveHandler(evt) {
    moveCount += 1;

    showPosition(evt);
    showStatistics();
}




function showPosition(evt) {
    var html = "offsetX: " + evt.offsetX +"<br/>" //
               +
               "offsetY: " + evt.offsetY;

    document.getElementById("position-div").innerHTML = html;
}

function showStatistics() {
    var html =
        "enterCount:" + enterCount + "<br/>" //
        +
        "moveCount:" + moveCount + "<br/>" //
        +
        "leaveCount:" + leaveCount;
    document.getElementById("statistics-div").innerHTML = html;
}

 
-
Вы можете получить доступ к элементу, генерирующему событие через объект event.
event-obj-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(evt)  {
             var target = evt.target;

             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Access 'target' object via 'event' object</h3>

      <button onclick="changeSize(event)">Click Me to Change Size</button>

   </body>
</html>

 
-
Пример функции обработки с несколькими параметрами.
multi-params-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(borderColor, target, evt, bgColor)  {
             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
             target.style.borderColor = borderColor;
             target.style.backgroundColor = bgColor;
         }
      </script>

   </head>
   <body>

      <h3>A Handler has multiple parameters</h3>
      <a href="">Reset</a> <br/><br/>

      <button onclick="changeSize('red', this, event, 'green')">Click Me</button>

   </body>
</html>

 
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.