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>