window.addEvent('domready', function(){
/*JavaScript原生的鼠标事件：mouseover , mouseout , mousemove*/
$('parent').addEvents({
//当鼠标指针悬停于某元素之上时执行脚本
'mouseover':function(event){
$('print').set('html','mouseover, '+'X:' + event.client.x + ' Y:' + event.client.y);
},
//当鼠标指针移出某元素时执行脚本
'mouseout':function(event){
$('print').set('html','mouseout, '+'X:' + event.client.x + ' Y:' + event.client.y);
},
//当鼠标指针移动时执行脚本
'mousemove':function(event){
$('print').set('html','mousemove, '+'X:' + event.client.x + ' Y:' + event.client.y);
}
});
/*MooTools扩展的自定义事件：mouseenter , mouseleave , mousewheel */
$('parent1').addEvents({
//mouseenter 鼠标进入DOM元素的区域后触发。不会在经过子元素的时候触发(不像 mouseover)。
'mouseenter':function(event){
$('print1').set('html','mouseenter, '+'X:' + event.client.x + ' Y:' + event.client.y);
},
//mouseleave 鼠标离开DOM元素的区域后触发。不会在经过子元素的时候触发(不像 mouseout)。
'mouseleave':function(event){
$('print1').set('html','mouseleave, '+'X:' + event.client.x + ' Y:' + event.client.y);
},
//本事件在鼠标滚轮滚动时触发
'mousewheel':function(event){
$('print1').set('html','mousewheel, '+'X:' + event.client.x + ' Y:' + event.client.y);
}
});
/*mouseenter 和 mouseleave 的综合应用 */
$('parent2').addEvents({
'mouseenter': function(){
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
}).tween('height', '200px');
},
'mouseleave': function(){
this.set('tween', {}).tween('height', '20px');
}
});
});
<div class="box">
<div id="print"></div>
<div id="parent">
<div id="children">子元素</div>
父元素
</div>
<p><strong>JavaScript原生的鼠标事件：</strong>mouseover , mouseout , mousemove</p>
</div>
<div class="box">
<div id="print1"></div>
<div id="parent1">
<div id="children">子元素</div>
父元素
</div>
<p><strong>MooTools扩展的自定义事件：</strong>mouseenter , mouseleave , mousewheel</p>
</div>
<div class="box">
<div id="parent2"> </div>
<p>mouseenter 和 mouseleave 的综合应用</p>
</div>
.box{
float: left;
margin-left: 100px;
text-align: center;
padding: 10px;
width: 200px;
}
#parent,#parent1,#parent2{
height: 200px;
width: 200px;
background-color: #FAA;
text-align: right;
margin-bottom: 20px;
}
#children{
height: 100px;
width: 100px;
background-color: #8ACC00;
padding: 0px;
text-align: right;
}
#print,#print1{
background-color: #000;
color: #FFF;
height: 20px;
width: 200px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 20px;
}