- 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;
width: 20px;
height: 20px;
}
#playbord {
position: fixed;
left: 10px;
top: 10px;
}
#enter {
width: 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.οnlοad=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.οnmοusemοve=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.οnclick=function (){
tab(ev);
};
document.οnkeydοwn=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 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id='move'></div>
<script>
window.οnlοad=function (){
var oDiv=document.getElementById('move');
oDiv.οnmοusedοwn=function(ev){
var oEvent = event || ev ;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=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 {
width: 600px;
height: 20px;
position: relative;
margin: 20px auto;
background: rgb(255, 234, 234);
}
#control {
width: 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);
width: 0;
height: 0;
}
</style>
</head>
<body>
<div id='bar'>
<div id='control'></div>
</div>
<div id='box'></div>
<script>
window.οnlοad=function(){
var oBar=document.getElementById('bar');
var oControl=document.getElementById('control');
var oBox=document.getElementById('box');
oControl.οnmοusedοwn=function(ev){
var oEvent=event ||ev;
var disX=oEvent.clientX-oControl.offsetLeft;
var scale=1/(oBar.offsetWidth-oControl.offsetWidth);
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
};
return false;
};
oBox.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=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{
width: 200px;
height: :60px;
margin: 0 auto;
padding-top: 30px;
font-size: 24px;
font-weight: bold;
line-height: 24px;
color:red;
text-align: center;
}
.btn {
width:190px;
margin: 30px auto;
}
.btn span {
display: inline-block;
margin-left: 20px;
width: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.οnlοad=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.οnclick=goGift;
btn2.οnclick=stopGift;
document.οnkeyup=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>