|
副问题[/!--empirenews.page--]
本日我們講解一下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);
下边是一个变乱触发的例子:
（编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
