Учебники

MooTools — обработка событий

Сентябрь 8, 2018

Как и селекторы, обработка событий также является важной концепцией MooTools. Эта концепция используется для создания событий и действий для событий. Нам также необходимо понимать действия и их последствия. Давайте попробуем несколько событий в этой главе.

Один щелчок левой кнопкой мыши

Наиболее распространенным событием в веб-разработке является Single Left Click. Например, Hyperlink распознает одно нажатие и переносит вас в другой элемент DOM. Первым шагом является добавление события click к элементу DOM. Давайте рассмотрим пример, который добавляет событие нажатия кнопки. Когда вы нажмете эту кнопку, появится сообщение.

пример 

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var clickFunction = function(){
            //put whatever you want to happen in here
            document.write('This button element recognizes the click event');
         }
         
         window.addEvent('domready', function() {
            $('id_name').addEvent('click', clickFunction);
         });
      </script>
   </head>
   
   <body>
      <input type = "button" id = "id_name" value = "click here"/>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

При нажатии на кнопку вы получите следующее сообщение — 

This button element recognizes the click event

Мышь Enter и Мышь Выйти

Mouse Enter и Mouse Leave являются наиболее распространенными событиями в обработке событий. Действие применяется в зависимости от положения мыши. Если положение мыши в элементе DOM — ВВОД, тогда будет применено одно действие. Если он покидает область элемента DOM, он применяет другое действие.

Давайте рассмотрим пример, который объясняет, как работает событие мыши Enter. Посмотрите на следующий код.

пример 

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var mouseEnterFunction = function(){
            //put whatever you want to happen in here
            $('result').set('html', "Recognizes the mouse enter event");
         }
         
         window.addEvent('domready', function() {
            $('id_name').addEvent('mouseenter', mouseEnterFunction);
         });
      </script>
   </head>
   
   <body>
      <input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
      <lable id = "result"></lable>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

Если вы удерживаете указатель мыши на кнопке, вы получите следующее сообщение. 

Recognizes the mouse enter event

Давайте рассмотрим пример, который объясняет, как работает событие Mouse Leave. Посмотрите на следующий код.

пример 

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var mouseLeaveFunction = function(){
            //put whatever you want to happen in here
            $('result').set('html', "Recognizes the mouse leave event");
         }
         
         window.addEvent('domready', function() {
            $('id_name').addEvent('mouseleave', mouseLeaveFunction);
         });
      </script>
   </head>
   
   <body>
      <input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
      <lable id = "result"></lable>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

Если вы удерживаете указатель мыши на кнопке, вы получите следующее сообщение. 

Recognizes the mouse leave event

Удалить событие

Этот метод используется для удаления события. Удалить событие так же просто, как добавить событие, и оно следует той же структуре. Посмотрите на следующий синтаксис.

Синтаксис 

//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

Нажатия клавиш в качестве ввода

MooTools может распознавать ваши действия — вид ввода, который вы дали через элемент DOM. Используя функцию keydown , вы можете читать каждую клавишу из элемента DOM типа ввода.

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

пример 

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var keydownEventFunction = function () {
            alert('This textarea can now recognize keystroke value');
         };
         
         window.addEvent('domready', function() {
            $('myTextarea').addEvent('keydown', keydownEventFunction);
         });
      </script>
   </head>
   
   <body>
      Write Something: <textarea id = "myTextarea"> </textarea>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

Попробуйте ввести что-то в текстовую область. Вы найдете окно предупреждения вместе со следующим сообщением. 

This textarea can now recognize keystroke value

Попробуйте добавить текст в тот же пример, который читает значение из текстовой области, когда вы вводите его. Это возможно с помощью функции event.key с событием. Посмотрите на следующий код.

пример 

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         //notice the parameter "event" within the function parenthesis
         var keyStrokeEvent = function(event){
            var x = event.key;
            alert("The enter value is: "+x)
         }
         
         window.addEvent('domready', function() {
            $('myTextarea').addEvent('keydown', keyStrokeEvent);
         });
      </script>
   </head>
   
   <body>
      <lable>Write Something:</lable> <br/>
      <textarea id = "myTextarea"> </textarea>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

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

51
Share: