- 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>