Today, we will explain the event part of mt. The event description mainly includes three parts: binding, removing, and triggering. Let's take a look at an example.
// Jquery event binding method
$ ('A'). click (function ){
Alert ('A ');
});
// Or
$ ('A'). bind ('click, mouseover', function ){
Alert ('A ');
});
// Event binding method of mt
$ ('A'). addEvent ('click', function ){
Alert ('A ');
});
Or
$ ('A'). addEvents ({
'Click': function ){
Alert ('A ');
},
'Mouseenter': function ){
Alert ('bb ');
}
});
From the above example, we can see that the jq event binding method is very similar to that of mt, because mt does not need to be encapsulated into function, therefore, we can also directly write events on the node, such:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<body>
<div id='a' onclick="aa(this,'b')">click</div>
<script type='text/javascript'>
var aa=function(i,msg){
alert(i.get('tag')+'|'+i.getProperty('id')+'|'+msg);
}
</script>
In the above example, I passed in the object itself, that is, this, and then I can understand that it has already selected a node, just operate on the node as you would.
Next we will mainly explain the first method. When using the first method, we must ensure that the dom node has been loaded. If the node has not been loaded due to network reasons, in this case, binding events will fail, so we can use the following method to avoid this problem:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Script style = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"> </script>
</Head>
<Body>
<Div id = 'A' onclick = "aa (this, 'B')"> click </div>
<Script type = 'text/javascript '>
Window. addEvent ('domainready', function (){
Alert ('execute First ');
});
Window. addEvent ('load', function (){
Alert ('executed later ');
});
</Script>
In the preceding example, the domready event is executed before onload. Note that onload is executed only after all dom nodes are loaded, therefore, domready has been executed before the dom node is loaded. load can only appear once on a page, while domready can be used multiple times. otherwise, IE will dislike you.
What we need to do now is bind an event to a after loading. Let's look at the example below:
<Body>
<A href = 'HTTP: // www.google.com 'id = 'A'> click </a>
<Script type = 'text/javascript '>
Window. addEvent ('load', function (){
Var aa = function (event ){
Event. stop ();
Alert ('aa1 ');
}
$ ('A'). addEvent ('click', aa );
});
</Script>
Or
<Body>
<A href = 'HTTP: // www.google.com 'id = 'A'> click </a>
<Script type = 'text/javascript '>
Window. addEvent ('load', function (){
$ ('A'). addEvent ('click', function (event ){
Event. stop ();
Alert ('aa1 ');
});
});
</Script>
If you can confirm that node a has been loaded, you can omit the load event, that is:
<Body>
<A href = 'HTTP: // www.google.com 'id = 'A'> click </a>
<Script type = 'text/javascript '>
$ ('A'). addEvent ('click', function (event ){
Event. stop ();
Alert(event.tar get); // object itself, the development plug-in is very useful
Alert (event. relatedTarget );
Alert (event. key); // returns the lowercase letter pressed.
Alert (event. shift); // returns true if the key pressed is shift.
Alert ('aa1 ');
});
</Script>
In the above example, in order to prevent a from being hyperlink to google, I passed the event parameter and used the event. stop () to block the default event. for more information about event parameters, see the following example:
$('I7 '). addEvent ('keypress', function (event ){
Alert (event. key );
Alert ('Code: '+ event. code); // The keyboard code of the buttons
Alert ('shift: '+ event. shift );
Alert ('control: '+ event. control );
Alert ('alt: '+ event. alt );
Alert ('meta: '+ event. meta );
// Ctr + S key combination
If (event. key ='s '& event. control ){
Alert ('document saved .');
}
});
So how to bind multiple events to an object? See the following example:
var fun1=function(){};
$('a').addEvents({
'mouseenter':fun1,
'mouseleave':function(){}
});
Through the above example, we have already bound two events to the node a. Remember not to add a comma to the end of the last event, or IE will make an error.
How can I remove an event after it is bound? Let's look at the example.
var destroy=function(){alert('Boom:'+this.id);}
$('myElement').addEvent('click',destroy);
$('myElement').removeEvent('click',destroy);
The following is an example of event triggering:
var txt=$('i7');
txt.addEvents({
'focus':function(){
if(txt.value.contains('Type here')) txt.value='';
},
'keyup':function(){
if(txt.value.contains('hello')){txt.fireEvent('burn','hello world!');}
else if(txt.value.contains('moo')){txt.fireEvent('burn','mootools!');}
else if(txt.value.contains('22')){txt.fireEvent('burn','Italy!');}
else if(txt.value.contains('33')){txt.fireEvent('burn','fireEvent');}
else if(txt.value.contains('q')){txt.fireEvent('burn',"I'm a bit late!",1000);}
},
'burn':function(text){
alert(text+'|'+txt.value);
txt.value='';
}
});
Some common event names are listed below. Of course, mt allows us to customize events. If you are interested, you can study how to customize events:
Domready
Load
Unload
Beforeunload
Selectstart
Selectend
Keypress
Blur
Change
Click
Dblclick
Focus
Focusin
Focusout
Keydown
Keypress
Keyup
Keyup
ScrollTo: scroll
Scroll: Rolling
Resize: When the size is changed
Move
Reset
Submit
Error
Abort
Mousemove
Mouseout
Mouseover
Mouseup
Mousedown
Mouseenter: When the mouse enters, make up for the mouseover problem.
Mouseleave: After the mouse leaves
Mousewheel: After scrolling
Contextmenu: Right-click
DOMMouseScroll
DOMContentLoaded
Readystatechange
Related courses:
One week learn Mootools 1.4 Chinese Tutorial: Sequence Theory
One week learn Mootools 1.4 Chinese tutorial :( 1) Dom Selector
One week learn Mootools 1.4 Chinese tutorial :( 2) Functions
One week learn Mootools 1.4 Chinese tutorial :( 3) Events
One week learn Mootools 1.4 Chinese tutorial :( 4) Type
One week learn Mootools 1.4 Chinese tutorial :( 5) Ajax
One week learn Mootools 1.4 Chinese tutorial :( 6) Animation
One week learn Mootools 1.4 Chinese tutorial :( 7) Summary ends
Other articles about Mootools 1.4:
Lightbox effect plug-in I wrote, based on MooTools 1.4
My perpetual calendar plug-in (including calendar, solar term, various holidays, etc.), based on MooTools 1.4
I wrote an effect plug-in similar to the menu in the upper left corner of the home page of this site, based on MooTools 1.4
Advanced usage of delay in Mootools
Bind is used in Mootools to bind objects to functions.
Using extend and implement in Mootools to extend functions or methods for your Functions
Write an extension by yourself and change the syntax of Mootools exactly the same as that of Jquery.
Mootools1.4 custom events
Using Mootools1.4, I wrote something that moves the background image as the mouse moves.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
