今天我們講解一下mt的事件部分,對於事件的講解主要包含三部分,分別是:綁定,移除,和觸發,我們首先來看一個例子
//jquery的事件綁定方式
$('a').click(function){
alert('aa');
});
//或
$('a').bind('click,mouseover',function){
alert('aa');
});
//mt的事件綁定方式
$('a').addEvent('click',function){
alert('aa');
});
或
$('a').addEvents({
'click':function){
alert('aa');
},
'mouseenter':function){
alert('bb');
}
});
通過上邊的例子我們可以看出,其實jq的事件綁定方式和mt是很像的,當然了因為mt不需要封裝進function(){}內,所以我們還可以直接在節點上寫事件,如:
<!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'>
var aa=function(i,msg){
alert(i.get('tag')+'|'+i.getProperty('id')+'|'+msg);
}
</script>
在上邊的例子中,我把對象本身傳遞了進來,即this,然後我就可以把它把他理解是已經選擇了節點,像動作節點那樣去操作他就行了.
接下來我們主要講解一下第一種方式,使用第一種方式的時候必須要確保dom節點已經載入完畢,如果因為網路原因導致節點還沒有載入,此時綁定事件是會失敗的,所以我們可以用下邊的方法來避免此問題:
<!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('domready',function(){
alert('先執行');
});
window.addEvent('load',function(){
alert('後執行');
});
</script>
上邊的例子中domready事件會在onload之前被執行,這一點請注意,onload是在所有的dom節點載入完畢之後才執行,所以domready在dom節點載入完畢之前就已經執行了.必須要謹記的是,load在一個頁面內只能出現一次,而domready則可以多次使用.否則IE會不爽你.
那麼我們現在要做的是當a載入完畢之後就給他綁定一個事件,看下邊的例子:
<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>
或
<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>
如果你能確認a節點已經載入完成了,那麼load事件你可以省略,即:
<body>
<a href='http://www.google.com' id='a'>click</a>
<script type='text/javascript'>
$('a').addEvent('click',function(event){
event.stop();
alert(event.target);//對象本身,開發外掛程式很有用
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>
上邊的例子中,我為了防止a被超連結至google,所以我傳遞event參數,並用event.stop()來阻塞預設事件.關於event參數的更多用法看下邊的例子:
$('i7').addEvent('keypress',function(event){
alert(event.key);
alert('code:'+event.code);//按鍵的鍵盤代碼
alert('shift:'+event.shift);
alert('control:'+event.control);
alert('alt:'+event.alt);
alert('meta:'+event.meta);
//Ctr+S 按鍵組合
if(event.key == 's' && event.control){
alert('Document saved.');
}
});
那麼如何給一個對象綁定多個事件呢,看下邊的例子:
var fun1=function(){};
$('a').addEvents({
'mouseenter':fun1,
'mouseleave':function(){}
});
通過上邊的例子我們就已經給a這個節點綁定了兩個事件,記得最後一個事件後邊不要加逗號,要不然IE會出錯.
事件被綁定之後如何移除呢?我們來看例子
var destroy=function(){alert('Boom:'+this.id);}
$('myElement').addEvent('click',destroy);
$('myElement').removeEvent('click',destroy);
下邊是一個事件觸發的例子:
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='';
}
});
下邊列出了一些常用的事件名稱,當然了mt允許我們自訂事件,感興趣的朋友可以研究一下如何自訂事件:
domready
load
unload
beforeunload
selectstart
selectend
keypress
blur
change
click
dblclick
focus
focusin
focusout
keydown
keypress
keyup
keyup
scrollTo:滾動到
scroll:滾動時
resize:改變尺寸時
move
reset
submit
error
abort
mousemove
mouseout
mouseover
mouseup
mousedown
mouseenter:滑鼠進入後,彌補mouseover的問題
mouseleave:滑鼠離開後
mousewheel:滾動後
contextmenu:點右鍵後
DOMMouseScroll
DOMContentLoaded
readystatechange
相關課程:
一周學會Mootools 1.4中文教程:序論
一周學會Mootools 1.4中文教程:(1)Dom選取器
一周學會Mootools 1.4中文教程:(2)函數
一周學會Mootools 1.4中文教程:(3)事件
一周學會Mootools 1.4中文教程:(4)類型
一周學會Mootools 1.4中文教程:(5)Ajax
一周學會Mootools 1.4中文教程:(6)動畫
一周學會Mootools 1.4中文教程:(7)匯總收尾
其他關於Mootools 1.4的文章:
我寫的Lightbox效果外掛程式，基於MooTools 1.4
我寫的萬年曆外掛程式(含天干地支,農曆,陽曆,節氣,各種節假日等)，基於MooTools 1.4
我寫的類似本站首頁左上方的菜單的效果外掛程式，基於MooTools 1.4
Mootools中delay這個延遲函數的進階用法
Mootools中使用bind給函數綁定對象
Mootools中使用extend和implement給你的函數擴充功能或方法
自己寫個擴充把Mootools的文法改的和Jquery的文法一模一樣
Mootools1.4中自訂事件
用Mootools1.4寫了一個隨著滑鼠移動而背景圖也跟著移動的東西
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
