- event对象:事件对象,应用在IE6-8及高版本的chrome浏览器,在低版本的chrome浏览器及Firefox中需要用到一个参数:ev,在调用函数时,系统就将这个参数传给函数;为了解决这个兼容问题,可以用一个“或”的表达式,例如:
var oEvent=event||ev;
,然后调用的时候,直接用oEvent就好了; - document:包含整个页面的内容,上至<!DOCTYPE html>,下至;如果需要给整个页面加点击事件,应该加在document上而不是body上,因为body的范围由它所包含的内容决定;
- 事件流:最简单的一个事件流的例子——事件冒泡(一般会带来一些困扰,所以很多时候需要取消冒泡:通过事件对象来解决——
oEvent.cancelBubble=true;
,典型的例子为仿select下拉框); - 鼠标事件:鼠标坐标,clientX及clientY(表示的是可视区的坐标,所有如果有滚动的时候需要加上scrollTop和scrollLeft);
- keyCode:表示键盘上按键的键码,按键事件为onkeydown及onkeyup;(按键卡顿现象:照顾特殊人群,但是会造成不好的影响,解决方案为将事件加上setInterval函数来将延迟给掩饰掉,按键抬起时清除定时器);
- 其他属性:ctrlKey,shiftKey、altKey,使用的时候都需要结合事件对象,例如:
oEvent.ctrlKey
;
示例代码 1:
知识点:事件的兼容性判断,split(),鼠标和键盘事件的使用,clientX,clientY鼠标移动时获取鼠标的位置
(要求)
- 在输入框中输入任意字符;
- 鼠标点击enter或者直接用键盘enter;
- 移动鼠标就能按到效果,输入的字符越多,效果越明显;
- 如果未输入任何字符,那么将会提示输入;
编写思路: 获取输入的内容,分割成一个一个DIV插入到页面中,每个Div按鼠标位置进行排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
#playbord div {
float: left;
position: absolute;
20px;
height: 20px;
}
#playbord {
position: fixed;
left: 10px;
top: 10px;
}
#enter {
230px;
margin: 60px auto;
}
</style>
</head>
<body>
<div id='enter'>
<input id='input' type="text" placeholder="Enter your telephone number or your QQ" />
<input id='btn' type='button' value="Enter" />
</div>
<div id='playbord'></div>
<script>
window.onload=function (ev){
var oInp=document.getElementById('input');
var oBtn=document.getElementById('btn');
var oPlay=document.getElementById('playbord');
var aRus=[];
function tab(ev){
aRus=oInp.value.split('');
if(aRus.length>0){
for(var i=0;i<aRus.length;i++){
var oDiv=document.createElement('div');
oDiv.innerHTML=aRus[i]+' ';
oPlay.appendChild(oDiv);
};
document.onmousemove=function (ev){
var oEvent=event||ev;
var aDiv=oPlay.children;
for(var i=aDiv.length-1;i>0;i--){
aDiv[i].style.left=aDiv[i-1].offsetLeft+15+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
aDiv[0].style.left=oEvent.clientX+'px';
aDiv[0].style.top=oEvent.clientY+'px';
}
}
else {
alert('Please Enter Something First~')
}
};
oBtn.onclick=function (){
tab(ev);
};
document.onkeydown=function (ev){
var oEvent=event||ev;
if(oEvent.keyCode==13){
tab(ev);
};
};
}
</script>
</body>
</html>
示例代码 2:
拖拽:保证鼠标的位置及被拖动元素的相对位置不变,需要注意的点如下:
- 应该是只有杂鼠标按下之后才能移动,鼠标抬起时移动停止;
- 对于鼠标快速移动时可能移出元素范围带来的移动异常,将移动事件加在document上即可解决;
- 当移动出视窗时释放鼠标按键,仍然能够移动,为了解决这个问题,需要将鼠标释放按钮事件也加在document上;
- 在Firefox中拖拽空元素的时候会出现重影,这也是FF中的一种默认事件,可以用返回false的方法来组织这个bug;
- 被拖拽元素被拖出视窗范围,这时候就可以判断来阻止元素被拖出视窗;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> * { margin: 0; padding: 0; } #move { 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div id='move'></div> <script> window.onload=function (){ var oDiv=document.getElementById('move'); oDiv.onmousedown=function(ev){ var oEvent = event || ev ; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent = event || ev ; var h=oEvent.clientX-disX; var v=oEvent.clientY-disY; if(h<0){ h=0; } else if(h>document.documentElement.clientWidth-oDiv.offsetWidth){ h=document.documentElement.clientWidth-oDiv.offsetWidth; }; if(v<0){ v=0; } else if(v>document.documentElement.clientHeight-oDiv.offsetHeight){ v=document.documentElement.clientHeight-oDiv.offsetHeight; }; oDiv.style.left=h+'px'; oDiv.style.top=v+'px'; }; document.onmouseup=function(){ document.onmousemove=null; }; return false; } } </script> </body> </html>
练习实例 3:
关键词:带框拖拽、自定义滚动条
- 带框拖拽:预先设置一个样式,按下鼠标产生一个div并赋予样式,div的大小与框相同,位置与框相同,移动时只移动框,松开鼠标时才移动框,并且将产生的div移出;
- 自定义滚动条:控制对象的大小、透明度、文字滚动等;
知识点思路总结:带框主要是构建一个新的div来实现,新的div要和拖拽目标大小一样,拖拽的时候拖拽的是带边框的div,鼠标抬起后移除带框div,写入原div。
制作过程中出现了一些问题,比如offsetleft是相对于父容器来计算的,因此控制按钮拖拽的计算方法上和拖拽以body为父元素的div是差不多的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> #bar { 600px; height: 20px; position: relative; margin: 20px auto; background: rgb(255, 234, 234); } #control { 20px; height: 20px; position: absolute; background: rgb(255, 0, 0); } .frame { border: 1px dashed blue; position: absolute; } #box { position: absolute; background: rgb(12, 234, 0); 0; height: 0; } </style> </head> <body> <div id='bar'> <div id='control'></div> </div> <div id='box'></div> <script> window.onload=function(){ var oBar=document.getElementById('bar'); var oControl=document.getElementById('control'); var oBox=document.getElementById('box'); oControl.onmousedown=function(ev){ var oEvent=event ||ev; var disX=oEvent.clientX-oControl.offsetLeft; var scale=1/(oBar.offsetWidth-oControl.offsetWidth); document.onmousemove=function(ev){ var oEvent=event ||ev; var h=oEvent.clientX-disX; if(h<0){ h=0 } else if(h>oBar.offsetWidth-oControl.offsetWidth){ h=oBar.offsetWidth-oControl.offsetWidth; }; oControl.style.left=h+'px'; oBox.style.width=oControl.offsetLeft*scale*300+'px'; oBox.style.height=oControl.offsetLeft*scale*300+'px'; } document.onmouseup=function(){ document.onmousemove=null; }; return false; }; oBox.onmousedown=function(ev){ var oEvent=event||ev; var disX=oEvent.clientX-oBox.offsetLeft; var disY=oEvent.clientY-oBox.offsetTop; var oFrame=document.createElement('div'); oFrame.style.width=oBox.offsetWidth-2+'px'; oFrame.style.height=oBox.offsetHeight-2+'px'; oFrame.style.left=oBox.offsetLeft+'px'; oFrame.style.top=oBox.offsetTop+'px'; oFrame.className='frame'; document.body.appendChild(oFrame); document.onmousemove=function(ev){ var oEvent= event || ev ; var h=oEvent.clientX-disX; var v=oEvent.clientY-disY; if(h<0){ h=0; } else if(h>document.documentElement.clientWidth-oFrame.offsetWidth){ h=document.documentElement.clientWidth-oFrame.offsetWidth; }; if(v<0){ v=0; } else if(v>document.documentElement.clientHeight-oFrame.offsetHeight){ v=document.documentElement.clientHeight-oFrame.offsetHeight; }; oFrame.style.left=h+'px'; oFrame.style.top=v+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; oBox.style.left=oFrame.offsetLeft+'px'; oBox.style.top=oFrame.offsetTop+'px'; document.body.removeChild(oFrame); }; return false; } } </script> </body> </html>
练习实例 4:
QQ登陆面板。 主要知识点总结: 考虑兼容性,getClassName方法的封装。 时间冒泡和时间默认行为不同浏览器阻止方法的兼容,更换classname来达到变换div,span的目的,
合理利用事件冒泡。代码会贴codepen的链接。
练习实例 5:
抽奖系统。键盘事件
主要知识点记录: keyDown 用户按下任意键时触发,如果按住不放会重复触发。keyPress 按字符键时触发。 keyUp 用户释放键盘上的键时触发。 keyCode属性确定按了什么键。
立一个flag来做状态标志,方便切换状态。随机数的用法,Math floor和Math random。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> *{ margin: 0; padding: 0; } #gift{ 200px; height: :60px; margin: 0 auto; padding-top: 30px; font-size: 24px; font-weight: bold; line-height: 24px; color:red; text-align: center; } .btn { 190px; margin: 30px auto; } .btn span { display: inline-block; margin-left: 20px; 50px; height:30px; background: #036; border-radius: 7px; text-align: center; font-size:16px; line-height:30px; color: aliceblue; cursor: pointer; } </style> </head> <body> <div id="gift"> 点击开始抽奖! </div> <div class="btn"> <span id="start">开始</span> <span id="stop">停止</span> </div> <script> window.onload=function(){ var giftList=["100元","iphone","ipad2","watch","小汽车","谢谢惠顾"]; var gift=document.getElementById('gift'); var btn1=document.getElementById('start'); var btn2=document.getElementById('stop'); var time=null; var flag=0; btn1.onclick=goGift; btn2.onclick=stopGift; document.onkeyup=function(e){ e= e ||window.event; if(e.keyCode==13){ if(flag==0){ goGift(); flag=1; } else{ stopGift(); flag=0; } } } function goGift(){ btn1.style.background='gray'; clearInterval(time); time=setInterval(function(){ var context=giftList[Math.floor(Math.random()*giftList.length)]; gift.innerHTML=context; },30); } function stopGift(){ btn1.style.background='#036'; clearInterval(time); } } </script> </body> </html>