Mootools对元素提供了addEvent，removeEvent,addEvents,removeEvents,cloneEvents等方
法，用于（批量）
添加或（批量）移除，以及clone事件等。下面代码为相应方法的使用示例：
<!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>
<title>event</title>
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
</head>
<body>
<input id="myText" type="text" size="10" /> <br />
<input id="myText2" type="text" size="10" /> <br />
<input id="myText3" type="text" size="10" /> <br />
<input id="myText4" type="text" size="10"/> <br />
<div id="myDiv" style="background:aliceblue;width:100px;height:100px">鼠标进入区域</div>
</body>
</html>
<script type="text/javascript">
/*
Event: 兼容各浏览器的事件管理
参数: event 浏览器的event对象
属性: shift 如果按了键盘的shift键，则返回true
control
如果按了键盘的ctrl键，则返回true
alt
如果按了键盘的alt键，则返回true
meta
如果按了键盘的meta键，则返回true
wheel
鼠标滚轮的滚动量
code 按下的键盘的键代码
page.x
相对于整个浏览器的鼠标x位置
page.y
相对于整个浏览器的鼠标y位置
client.x
相对于可视区域的鼠标x位置
client.y
相对于可视区域的鼠标y位置
key
按下的键盘的键的名称。
如 ‘enter’, ‘up’, ‘down’, ‘left’, ‘right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’.
target
事件的target
relatedTarget
事件的参照target（即前一个事件的target）
*/
$('myText').onkeydown = function(event){
var event = new Event(event);
//alert(event.key);
//alert(event.shift);
if (event.key == 's' && event.control)
{
alert('documentsaved');
}
};
/***************************************事件的添加和移
除*************************************************/
function eventOp()
{
var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element.
$('myText2').addEvent('click', destroy);
//添加并移除事件
$('myText4').addEvent('click', destroy);
//移除先前为DOM元素添加的事件监听器
$('myText4').removeEvent('click', destroy);
//bind方法的使用
//When the function is added using Function:bind or Function:pass, etc, a new reference is created.
//For removeEvent to work, you must pass a reference to the exact function to be removed.
//This method is also attached to Document and Window.
var boundDestroy = destroy.bind($('anotherElement'));
$('myText4').addEvent('click', boundDestroy);
// 之后
$('myText4').removeEvent('click', destroy); // 这不会移除事件.
$('myText4').removeEvent('click', destroy.bind($('anotherElement'))); // 这也不会移除event.
$('myText4').removeEvent('click', boundDestroy); // 这是移除event 的正确方式.<
/span>
//addEvents批量添加事件的方法
$('myText4').addEvents({
'mouseover': function(){
alert('mouseover');
},
'click': function(){
alert('click');
}
});
$('myText4').addEvent('click', function(){ alert('clicked again'); });
$('myText4').addEvent('click', function(){ alert('clicked and again :('); });
//addEvent will keep appending each function.
//Unfortunately for the visitor, that'll be three alerts they'll have to click on.
//批量删除事件
$('myText4').removeEvents('click'); // This saves the visitor's finger by removing every click event.
$('myText4').removeEvents('mouseover');
$('myText4').fireEvent('click', $('anElement'), 1000);
//事件Clone
var myElement = $('myElement');
var myClone = myElement.clone().cloneEvents(myElement); //clones 元素及它的所有事件
}
eventOp();
function myFunction(event){
alert(event.client.x);
};
/*
bindWithEvent 自动会向目标function中传入一个mootools的Event类实例
参数: bind 可选，该对象中this所要引用的对象
args
可选，要传递入的参数;如果参数数量大于一个，需要使用数组
*/
$('myText3').addEvent('click', myFunction.bindWithEvent($('myText3')));
function showPosition(event){
$('myDiv').innerHTML = 'X:' + event.client.x + ' Y:' + event.client.y;
};
//mouseenter 鼠标进入DOM元素的区域后触发。不会在经过子元素的时候触发(不像
mouseover)。
$('myDiv').addEvent('mouseenter', showPosition);
//mouseleave 鼠标离开DOM元素的区域后触发。不会在经过子元素的时候触发(不像
mouseout)。
$('myDiv').addEvent('mouseleave', showPosition);
$('myDiv').addEvent('mousemove', showPosition);
$('myDiv').addEvent('mousewheel', showPosition);
</script>
好了，今天的内容就到这里了。
下载DEMO，请点击这里。
tag:mootools, 1.2
作者：代震军, daizhj
原文链接：http://www.cnblogs.com/daizhj/articles/1291587.html
posted on 2008-09-16 12:47
代震军 阅读(544)
评论(0) 编辑 收藏 网摘