MooTools - 事件处理

与选择器类似，事件处理也是MooTools的基本概念.此概念用于为事件创建事件和操作.我们还需要掌握行动及其影响.让我们在本章中尝试一些事件.

单击左键

Web开发中最常见的事件是单击左键.例如，Hyperlink识别单击事件并将您带到另一个DOM元素.第一步是向DOM元素添加click事件.让我们举个例子，在按钮上添加一个click事件.单击该按钮时，它将显示一条消息.

示例

                                    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);         });                           

您将收到以下输出 :

输出

Mouse Enter and Mouse Leave

鼠标进入和鼠标离开是事件处理中最常见的事件。 根据鼠标的位置应用操作。 如果鼠标的位置是DOM元素中的ENTER，则它将应用一项操作。 如果它离开DOM元素区域，那么它将应用另一个操作。

让我们以说明鼠标Enter事件如何工作的示例为例。 看一下下面的代码。

示例

                                    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);         });                      

            

输出

如果将鼠标指针停留在按钮上，则会收到以下消息。

Recognizes the mouse enter event

让我们以说明鼠标离开事件如何工作的示例为例。 看一下下面的代码。

示例

                                    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);         });                     
            

输出

如果将鼠标指针停留在按钮上，则会收到以下消息。

Recognizes the mouse leave event

Remove an Event

此方法用于删除事件。 删除事件就像添加事件一样容易，并且遵循相同的结构。 看一下以下语法。

语法

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

Keystrokes as Input

MooTools可以识别您的操作-通过DOM元素提供的输入类型。 通过使用keydown函数，您可以从输入类型DOM元素中读取每个键。

让我们举一个例子，其中有一个文本区域元素。 现在，让我们向文本区域添加一个keydown事件，只要该文本区域识别出任何密钥库，它将立即以警报消息响应。 看一下下面的代码。

示例

                                    var keydownEventFunction = function () {            alert('This textarea can now recognize keystroke value');         };                  window.addEvent('domready', function() {            $('myTextarea').addEvent('keydown', keydownEventFunction);         });                     Write Something:        

输出

尝试在文本区域中输入内容。 您会发现一个警告框以及以下消息。

This textarea can now recognize keystroke value

尝试在同一示例中添加一些文本，该示例会在您输入文本区域时从文本区域读取值。 通过将event.key函数与事件一起使用是可能的。 看一下下面的代码。

示例

                                    //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);         });                     Write Something: 
             

输出

尝试输入文字文本区域.您将被引导至警告框以及您在文本区域中输入的值.