元素查找 / 事件对象 / 事件流

元素查找：

回顾：
			1.节点 元素 
			2.节点属性   childNodes  parnetNode children  previousSibling  nextSibling
			3.节点集合    childNodes[索引]
			4.节点属性操作
				节点属性赋值：
					对象.属性名=值		例如：o.src='1.jpg'
					对象[属性名]=值
					对象.setAttribute(属性名,属性值)

				节点属性取值:
					对象.属性名
					对象[属性名]
					对象.getAttribute(属性名)
			5.样式的操作
				样式的修改
					对象.style.样式名=值;
				样式的获取
					对象.style.样式名
					window.getComputedStyle(对象,null)
					offset-名称			只读
			6.节点的查找
				(1)根据ID查找元素						返回值
					document.getElementById     		节点对象或者null
				(2)根据标签名查找节点
					document.getElementsByTagName       HTMLCollection 			在全局中查找
					obj.getElementsByTagName  			HTMLCollection  		在指定节点中查找
				(3)根据class查找元素
					document.getElementsByClassName(cls)  HTMLCollection
				(4)根据名称查找节点对象
					document.getElementsByName 			NodeList

事件对象：

事件对象:在事件触发时，由浏览器传递给事件的
		接收事件对象：在事件处理函数内接收

		 type
		 target
		 clientX   pageX  
		 clientY   pageY


		 事件对象兼容性：e=e||window.event;

举例：

  document.getElementById('btn').onmouseover=function(e){
			// console.log(e);
			// alert(e);
			// alert(window.event.clientX);  // IE浏览器
			e=e||window.event; //事件对象兼容性写法
		};

事件流：

事件流：事件传递

冒泡：事件的传递由最具体的元素，层层向外传递，直到最外层元素      现代主流浏览器事件传递机制
捕获:y事件的传递由最外层，向内层层传递，直到最具体元素

		阻止事件流(冒泡)：
		
			stopPropagation()       谷歌和火狐
			cancelBubble=true;      IE

例如：

	为三个div添加点击事件
	document.getElementById('box1').onclick=function () {
		alert('div1');
	};

	document.getElementById('box2').onclick=function () {
		alert('div2');
	};

	document.getElementById('box3').onclick=function (e) {
		// e=e||window.event;
		alert('div3');			
		// e.stopPropagation();//阻止事件冒泡
		// e.cancelBubble=true;//IE 阻止事件冒泡
		// if(e!=undefined){
		// 	e.stopPropagation();
		// }else{
		// 	window.event.cancelBubble=true;
		// }

		e?e.stopPropagation():window.event.cancelBubble=true;//兼容性写法
	};