1. 事件默认行为及阻止方式
1.1 浏览器的默认行为
JavaScript事件本身所具有的属性，例如a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等。
1.2 阻止默认行为的方式
event.preventDefault(); event.returnValue = false; return false;
//IE低版本和其他版本都支持return false，而其他两种IE低版本不支持。
<a href="">click here.</a>
<script type="text/javascript">
var aLink = document.getElementsByTagName("a")[0];
aLink.onclick = function(e){
var evt = e || event;
console.log("aaa");
//return false; //1
//evt.preventDefault(); //2
evt.returnValue = false; //3
}
</script>自定义右键菜单 oncontextmenu
ul{ /*菜单的css样式*/
display: none;
position: absolute;
top: 0;
left: 0;
}var oUl = document.getElementsByTagName("ul")[0];
document.oncontextmenu = function(e){ //右键点哪里，在哪里出现菜单
var evt = e || event;
oUl.style.display = "block";
oUl.style.left = evt.clientX + "px";
oUl.style.top = evt.clientY + "px";
}小例子来练手：
// 文本框只能输入数字
var aInput = document.getElementsByTagName("input")[0];
aInput.onkeydown = function(e){
var evt = e || event;
//console.log(evt.keyCode);//48-57
if(evt.keyCode < 48 || evt.keyCode > 57){
return false;
}
}2. DOM2级事件处理程序
DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。
添加事件监听器：addEventListener(事件名，处理函数，布尔值)
移除事件监听器：removeEventListener(事件名，处理函数，布尔值)
注意：事件名不带on，处理函数为函数指针，布尔值代表冒泡或捕获。现在的版本可以省略第三个参数，默认值为false
这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。
var outer = document.getElementById("outer");
outer.addEventListener("click",foo,true); //添加事件监听器
outer.removeEventListener("click",foo,true); //移除
function foo(){
console.log("aaa");
}
//通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除,需另外定义一个函数*普通时间不存在兼容问题，而DOM2级事件存在兼容性问题，IE低版本对象不支持“addEventListener”属性或方法，
IE下的事件监听器：attachEvent(事件名，处理函数)，detachEvent(事件名，处理函数) 注意：事件名带on。
道高一尺，魔高一丈，我们可以自己封装一个函数解决兼容问题。
function foo(){
console.log("aaa");
}
function addEvent(obj){
if(obj.addEventListener){
return obj.addEventListener("click",foo);
}else{
return obj.attachEvent("onclick",foo);
}
}
addEvent(outer);3. 事件委托机制
利用事件冒泡的原理，把本应添加给某元素上的事件委托给他的父级（外层）。
实现拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
100px;
height: 100px;
background: aquamarine;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onmousedown = function(e){
var evt = e || event;
_left = evt.offsetX;
_top = evt.offsetY;
document.onmousemove = function(e){
var evt = e || event;
x = evt.clientX - _left;
y = evt.clientY - _top;
if(x<=0){x=0;}
if(x >= document.documentElement.clientWidth - oDiv.offsetWidth){
x = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(y >= document.documentElement.clientHeight - oDiv.offsetHeight){
y = document.documentElement.clientHeight - oDiv.offsetHeight;
}
if(y<=0){y=0;}
oDiv.style.left = x + "px";
oDiv.style.top = y + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>