JS事件分为鼠标事件与键盘事件。想要保证事件被处罚一般要给document加事件监听。document可以理解为html标签外层的一个隐藏父标签，平时是看不到的，我们可以把它console.log一下，如下图：
JS事件需要使用event对象，比如这样：
document.onclick = function(ev）
{
alert(ev);
}
这样会弹出“object mouseevent”，即鼠标点击对象，但是IE8以下并不能识别ev，FF又不识别event，所以我们要简单的做一下兼容处理：
var oEvent = ev||event; //为防止事件冲突，还得给事件设置防止冒泡 oEvent.cancelBubble = true;
这样处理后直接用oEvent对象就可以了。cancelBubble翻译过来就是冒泡的意思。另外，jQuery的event.stopPropagation()也可以防止冒泡。
鼠标点击事件最常见的应用就是获取鼠标的坐标，然后让元素跟随鼠标位置的变化进行移动。一个获取鼠标位置的简单例子:
document.onclick = function(ev)
{
var oEvent = ev||event;
alert(oEvent.clientX +"+"+oEvent.client.Y);
}
值得注意的是，event.clientY获取到的坐标是基于可视区域的相对坐标值，如果我们把这个值添加给DOM元素的话，还必须要考虑到scrollTop的值，就像这样：
document.onmouseover = function(ev)
{
var oEvent = ev||event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.title = "X="+oEvent.clientX + "px" +"Y="+oEvent.clientY + scrollTop + "px";
}
为了日后方便使用，我们可以将此方法封装成一个函数：
function getPos(ev)
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//以JSON的形式返回
return {x:ev.clientX+scrollLeft ,y:ev.clientY+scrollTop};
}
var pos = getPos(oEvent);
//获取X：
console.log(pos.x);
//获取y：
console.log(pos.y);
键盘的事件也比较简单，如下是将文本框里的值通过点击ctrl+enter键赋给textarea的一个小demo：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>键盘事件demo</title>
</head>
<body>
<input type="text" id="txt1">
<br>
<textarea name="" id="txt2" cols="30" rows="10"></textarea>
<script>
var oTxt1 = document.getElementById("txt1");
var oTxt2 = document.getElementById("txt2");
oTxt1.onkeydown = function(ev)
{
var oEvent = ev||event;
//oEvent.keyCode = oEvent.which
if ( oEvent.keyCode == 13 && oEvent.ctrlKey) //JS提供的方法有ctrlkey,shiftkey,altkey
{
oTxt2.value += oTxt1.value+"
";
oTxt1.value = '';
}
};
</script>
</body>
</html>
最常见的按键事件应用就是按回车登录了，少点下鼠标操作很流畅。另外课程里还提到利用方向键控制元素移动的方法，不过长按按键本身是带有延迟的，因此控制元素移动的时候会在开始有轻微的卡顿，于是我找到了这篇博客：键盘控制div移动并且解决停顿问题（原生js）—— 浅吟清唱，大家可以去看一下，想法很精妙，下面直接放代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#move{
position: absolute;
top: 30px;
30px;
height: 30px;
background-color: #ff3b2d;
z-index:99;
}
</style>
</head>
<body>
<div id="move"></div>
<script>
window.onload = function(){
//获取Div元素
var oDiv = document.getElementById("move");
//创建各个方向条件判断初始变量
var left = false;
var right = false;
var top = false;
var bottom = false;
//当按下对应方向键时，对应变量为true
document.onkeydown = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=true;
break;
case 38:
top=true;
break;
case 39:
right=true;
break;
case 40:
bottom=true;
break;
}
};
//设置一个定时
setInterval(function(){
//当其中一个条件为true时，则执行当前函数（移动对应方向）
if(left){
oDiv.style.left = oDiv.offsetLeft-10+"px";
}else if(top){
oDiv.style.top = oDiv.offsetTop-10+"px";
}else if(right){
oDiv.style.left = oDiv.offsetLeft+10+"px";
}else if(bottom){
oDiv.style.top = oDiv.offsetTop+10+"px";
}
},20);
//执行完后，所有对应变量恢复为false，保持静止不动
document.onkeyup = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=false;
break;
case 38:
top=false;
break;
case 39:
right=false;
break;
case 40:
bottom=false;
break;
}
}
}
</script>
</body>
</html>
以上。
本课程内容整理自智能社的JS视频课程与浅吟清唱的简书博客。