学习笔记——Event对象和事件冒泡
一、Event对象和事件冒泡
1.什么是event对象
用来获取事件的详细信息：鼠标位置、键盘按键
•例子：获取鼠标位置：clientX
–document的本质：最顶层的虚拟父节点。document.childNodes[0].tagName
<script> document.onclick=function(ev){ var oEvent=ev||event; alert(oEvent.clientX+','+oEvent.clientY); //输出鼠标的位置 }; </script>
A.获取event对象(兼容性写法)
•var oEvent=ev||event;
2.事件流
A.事件冒泡
•取消冒泡：oEvent.cancelBubble=true
•例子：仿select控件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div{width:100px; height:150px; background:#ccc; display:none;} </style> <script> window.onload=function(){ oDiv=document.getElementById("div1"); oBtn=document.getElementById("btn1"); oBtn.onclick=function(ev){ oEvent=ev||event; oDiv.style.display='block'; oEvent.cancelBubble=true; //阻止时间冒泡 }; } document.onclick=function(){ oDiv.style.display='none'; }; </script> </head> <body> <input type="button" value="确定" id="btn1" /> <div id="div1"></div> </body> </html>
二、DOM事件流
1.鼠标事件
A.鼠标位置
a)可视区位置：clientX、clientY
•例子1：跟随鼠标的Div
•要点：
消除滚动条的影响（滚动条的意义——可视区与页面顶部的距离）
获取鼠标在页面的绝对位置
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> div{width:100px; height:100px; background:red; position:absolute;} </style> <script> window.onmousemove=function(ev){ //或者把winsow.onmousemove改为document.onmousemove也同样可以 oDiv=document.getElementById("div1"); scrollTop=document.documentElement.scrollTop||document.body.scrollTop; scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oEvent=event||ev; oDiv.style.left=scrollLeft+oEvent.clientX+'px'; oDiv.style.top=scrollTop+oEvent.clientY+'px'; }; </script> </head> <body style="height:2000px;"> <div id="div1"> </div> </body> </html>
•例子2：一串跟随鼠标的Div
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> div{width:10px; height:10px; background:red; position:absolute;} </style> <script> window.onload=function(){ aDiv=document.getElementsByTagName('div'); var i=0; document.onmousemove=function(ev){ oEvent=event||ev; for(i=aDiv.length-1;i>0;i--){ aDiv[i].style.top=aDiv[i-1].style.top; aDiv[i].style.left=aDiv[i-1].style.left; } aDiv[0].style.top=oEvent.clientY+'px'; aDiv[0].style.left=oEvent.clientX+'px'; }; }; </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
三、键盘事件
1.keyCode
A.定义：获取用户按下键盘的哪个按键
•例子：获得键盘某一按键的keyCode
<script> document.onkeydown=fucntion(ev){ oEvent=event||ev; alert(oEvent.keyCode); }; </script>
•例子：键盘控制Div移动
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> div{width:100px; height:100px; background:#ccc; position:absolute;} </style> <script> document.onkeydown=function(ev){ var oEvent=event||ev; var oDiv=document.getElementById("div1"); if(oEvent.keyCode==37){ oDiv.style.left=oDiv.offsetLeft-10+'px'; } else if(oEvent.keyCode==39){ oDiv.style.left=oDiv.offsetLeft+10+'px'; } }; </script> </head> <body> <div id="div1"></div> </body> </html>
思考题：如何让滑动变的更流畅。
2.其他属性
A.ctrlKey、shiftKey、altKey
•例子：提交留言
–回车 提交
–ctrl+回车 提交
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <script> window.onload=function(){ var oBtn=document.getElementById("btn1"); var oTxt1=document.getElementById("txt1"); var oTxt2=document.getElementById("txt2"); oBtn.onclick=function(){ oTxt1.value+=oTxt2.value+'\n'; oTxt2.value=''; }; oTxt2.onkeydown=function(ev){ var oEvent=event||ev; if(oEvent.ctrlKey&&oEvent.keyCode==13){ //按ctrl+回车提交oEvent.keyCode==13 oTxt1.value+=oTxt2.value+'\n'; oTxt2.value=''; } } }; </script> <body> <textarea id="txt1" rows="10" cols="40"></textarea><br /> <input id="txt2" type="text" /> <input id="btn1" type="button" value="留言" /> </body> </html>
四、默认行为
1.默认行为
A.什么是默认行为：不需要去编写，浏览器自带的功能。
2.阻止默认行为
A.普通写法：return false;
例子1：阻止表单提交
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script> window.onload=function(){ var oForm=document.getElementById("form1"); oForm.onsubmit=function(){ return false; }; }; </script> </head> <body> <form id="form1" action="http://www.sina.com"> <input type="submit" value="提交" /> </form> </body> </html>
•例子2. 屏蔽右键菜单
–弹出自定义右键菜单
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> *{margin:0; padding:0} ul{width:100px; position:absolute; left:50px; top:50px; display:none; background:#ccc; border:1px solid #333; list-style:none;} </style> <script> document.oncontextmenu=function(ev){ var oUl=document.getElementById("ul1"); var oEvent=event||ev; oUl.style.display='block'; oUl.style.left=oEvent.clientX+'px'; oUl.style.top=oEvent.clientY+'px'; return false; }; document.onclick=function(){ var oUl=document.getElementById("ul1"); oUl.style.display='none'; }; </script> </head> <body> <ul id="ul1"> <li>首页</li> <li>咨询</li> <li>问答</li> </ul> </body> </html>
•例子3. 只能输入数字的输入框
–keydown、keyup事件的区别
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script> window.onload=function(){ var oText=document.getElementById("text1"); oText.onkeydown=function(ev){ var oEvent=event||ev; if(oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)){ //8为删除键，48-57为数字键 return false; } }; }; </script> </head> <body> <input type="text" id="text1" /> </body> </html>
五、拖拽
1.简易拖拽
A.拖拽原理
a)距离不变：鼠标点击的位置到div的左边边缘的距离在拖动过程中始终不变。
b)三个事件
onmousedown：鼠标按下，记录一下这个不变的距离。
onmousemove：鼠标每移动一下，用鼠标的位置减去不变的距离设置div的left及top。
onmouseup：鼠标抬起时删除onmousemove和onmouseup事件。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> div{width:100px; height:100px; background:red; position:absolute;} </style> <script> window.onload=function(){ oDiv=document.getElementById("div1"); var disX=0; var disY=0; oDiv.onmousedown=function(ev){ var oEvent=event||ev; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; oDiv.onmousemove=function(ev){ var oEvent=event||ev; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; }; oDiv.onmouseup=function(){ //当鼠标抬起，把mousemove事件干掉 oDiv.onmousemove=null; oDiv.onmouseup=null; //把mouseup干掉 }; }; }; </script> </head> <body> <div id="div1"></div> </body> </html>
在鼠标快速移动的时候div会脱开。原因是onmousemove事件是加在div上的。如果鼠标移出去了。那事件就不起作用。所以需要把onmousemove事件加在document上。
B.靠谱拖拽
a)原有拖拽的问题
•拖动太快会脱开
–直接给document加事件
•FF下，空Div拖拽Bug
–阻止默认事件：在鼠标点下时阻止默认行为。
window.onload=function(){ oDiv=document.getElementById("div1"); var disX=0; var disY=0; oDiv.onmousedown=function(ev){ var oEvent=event||ev; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent=event||ev; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; }; document.onmouseup=function(){ //当鼠标抬起，把mousemove事件干掉 document.onmousemove=null; document.onmouseup=null; //把mouseup干掉 }; return false; //解决底版本的火狐下div为空的时候出现的拖拽bug。 }; };
•防止拖出页面
－修正位置完整的拖拽代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> div{width:100px; height:100px; background:red; position:absolute;} </style> <script> window.onload=function(){ oDiv=document.getElementById("div1"); var disX=0; var disY=0; oDiv.onmousedown=function(ev){ var oEvent=event||ev; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent=event||ev; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0){ l=0; } else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){ l=document.documentElement.clientWidth-oDiv.offsetWidth; } else if(t<0){ t=0; } else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){ t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function(){ //当鼠标抬起，把mousemove事件干掉 document.onmousemove=null; document.onmouseup=null; //把mouseup干掉 }; return false; //解决底版本的火狐下div为空的时候出现的拖拽bug。 }; }; </script> </head> <body> <div id="div1"></div> </body> </html>
