Javascript事件基础和事件冒泡

事件（Event）
事件对象
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向等。
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存

	ex：
	元素.事件 = function(event){
	     event = event || window.event;
	};
	元素.事件 = function(e){     //常用
		e = e || event;
	};
		

写一个栗子，div跟随鼠标移动。
clientX：以浏览器窗口左上角为(0,0)的X轴坐标
clientY：以浏览器窗口左上角为(0,0)的Y轴坐标
pageX：以页面左上角为(0,0)的X轴坐标
pageY：以页面左上角为(0,0)的Y轴坐标
HTML：

<div id="box"></div>

css：

#box{
			width: 200px;
			height: 200px;
			background-color: #f90;
			position: absolute;
		}

Javascript：

window.onload = function () {
			var box = document.getElementById('box');
			document.onmousemove = function (event) {
				var e = event || window.event;
			//	var x = e.clientX;                    //相对与窗口的坐标
			//	var y = e.clientY;
			
				var left = e.pageX;                 //相对与页面的坐标
				var top = e.pageY;
				box.innerHTML='x坐标为：'+ x  +'y的坐标为：'+ y;

				box.style.left = left + 'px';
				box.style.top = top + 'px';
			}
			
		}

说明：如果页面的长度没有超过窗口的高度，就使用clientX、clientY，如果超过窗口的高度则使用pageX、pageY。

事件冒泡
事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消。
可以将事件对象的cancelBubble设置为true，即可取消冒泡。
- 例子：
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};

ex：
	<div id="box" style='width:100px;height:100px; background:red'>
		<input type="button" value="点击" id="btn">
	</div>
			var box = document.getElementById('box');
			var btn = document.getElementById('btn');

			box.onclick = function () {
				alert('我是box');
			};
			btn.onclick = function () {
				alert('我是button');
			};
			document.onclick = function () {
				alert('我是document');
			};
			//当点击btn时，不仅会触发btn的事件，box和document的点击事件也被触发

如果要取消冒泡则需要用cancelBubble。

btn.onclick = function (event) {
event = event || window.event'
event.cancelBubble = true;   //这样写box的onclick事件不会被触发
alert('我是button');
};