mootools的Event类很简单,方法少,属性比较齐全:
方法:
stop:停止事件分发
stopPropagation:停止事件继续向上传播
preventDefault:阻止默认行为的处理
bindWithEvent:绑定元素的事件
属性:
shift |
是否按下了SHIFT键 |
control |
是否按下了CTRL键 |
alt |
是否按下了ALT键 |
meta |
是否按下了META键(晕一个,META是什么键?) |
code |
按下键的编码keycode |
page.x |
鼠标相对于整个窗口的 x 偏移位置 |
page.y |
鼠标相对于整个窗口的 y 偏移位置 |
client.x |
鼠标相对于当前视口的 x 偏移位置 |
client.y |
鼠标相对于当前视口的 y 偏移位置 |
key |
这个变量记录按下的键盘的小写字母,如'a','w',也记录特殊的按键,如‘enter’, ‘up’, ‘down’, ‘left’, ‘ right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’. 这些特殊键的描述很方便 |
target |
事件的目标,如href |
relatedTarget |
事件的关联目标 |
代码示例如下:testEvent.html
<head>
<title>测试Event</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<script type="text/javascript" src="./js/mootools.v1.00.js?v=1"></script>
</head>
<body>

<textarea id=content cols=80 rows=20>
</textarea>

<div id=id_div>
<a id=id_a href='http://www.baidu.com' target='_blank'>测试事件</a>
</div>


<script language="javascript" type="text/javascript">

var flags = 0;


function log(msg)
{
$('content').value += msg + '\n';
}

function clear()
{
$('content').value='';
}

// 绑定div的单击事件

$('id_div').onclick=function(event)
{
var event = new Event(event);
log('<div>-onclick, target='+event.target);
}


function a_onclick(event)
{
clear();
var event = new Event(event);

if(flags==0)
{
log('这一次属正常的事件派发,你将看到百度的页面会弹出');
flags++;

}else if(flags==1)
{
log('这一次的事件将终止向上传播,不派发给<div>对象,单<a>对象的事件将继续,你应该还是可以看到百度页面');
flags++;
event.stopPropagation();

}else if (flags==2)
{
log('这一次的事件将不执行<a>的默认处理,你应该没有看到百度页面的弹出');
flags++;
event.preventDefault();

}else
{
log('这一次的事件就此停止,既不执行<a>的默认处理,也不向父对象<div>传播');
flags=0;
event.stop();
}
log('<a>-onclick, target='+event.target);
}

// 另一种绑定事件的方法,利用了事件类的bindWithEvent方法
$('id_a').onclick=a_onclick.bindWithEvent($('id_a'));

</script>

</body>
</html>