JavaScript 之默认行为 DOM2级，事件委托机制

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{
				width: 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>