学习笔记三：学用mootools的Event对象

学习笔记三：学用mootools的Event对象

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 >