Event对象+事件的冒泡和捕获

Event对象

Event种类

mouseEvent
keyboardEvent
focusEvent

  <body>	
  	<input type="text" onfocus="doFocus(event)">//这里的参数必须写event(也就是window.event)，如果不写则console的结果就是undefined。
  	<script>
  		function doFocus(ev){
  			console.log(ev);//类型是focusEvent
  	}
  	</script>
  </body>
  /*onblur（失去焦点时触发）同onfocus（得到焦点时触发）都是 焦点事件（focusEvent）*/

属性

clientX 只有鼠标事件才有，鼠标指针相对于当前窗口（文档）的水平坐标。
clientY 只有鼠标事件才有
keyCode 只有键盘事件才有

target 具体触发事件的元素（不管是什么类型的事件都可以用。用target可以得到具体点了哪一个元素）

  具体代码如下(点document中的任何元素都会变绿)：
  document.onclick=function(ev){
  	ev.target.style.backgroundColor="green";
  }
  //可以给新添加的元素绑定事件
  代码：
  css样式：
  <style>
  	ul{样式};li{样式};li.current{样式};
  </style>
  html文件：
  <ul class="myList">多个<li></li></ul>
  <button onclick="addLi()">添加</button>
  js文件：
  var myList=document.getElementById("myList");
  var lis=myList.getElementsByTagName("li");
  //循环
  for（var i=0;i<lis.length;i++）{
  	lis[i].onmouseover=function(){this.className="current";}
  	lis[i].onmouseout=function(){this.className="";}
  }
  //添加li
  function addli(){
  var liObj=document.createElement("li");//创建元素
  liObj.innerHTML="我是新的li";
  myList.appendChild(liObj);//添加
  }
  /*新添加之后的效果:点击button按钮会新添加li,但是新添加的li当鼠标滑过时不会改变颜色，原因是：绑定事件时，新的元素还没有创建。*/
  //解决方案如下：
  myList.onmouseover=function(ev){var e=ev||window.event;
  var currentEle=e.target;//得到具体触发的那个元素
  //console.log(currentEle.tagName);//得到当前鼠标滑过的元素名
  if(currentEle.tagName==="LI"){currentEle.className="current";}
  }
  myList.onmouseout=function(ev){var e=ev||window.event;//兼容IE
  var currentEle=e.target;//得到具体触发的那个元素
  //console.log(currentEle.tagName);//得到当前鼠标滑过的元素名
  if(currentEle.tagName==="LI"){currentEle.className="";}
  }
  /*分析如下：把事件绑定给ul,通过target来获得当前鼠标滑过的元素，因li是ul的子元素，所以滑过li就等于滑过了ul*/

事件的冒泡和捕获

捕获：浏览器由最外层向内捕获，直到找到被触发的那个元素。
冒泡：浏览器由内向外冒泡（找子元素的父元素的...父元素）。
只有冒泡的时候才触发事件，捕获的时候不会触发事件。
bigEle.addEventListener("click",function(){alert("big");},true)//第三个参数写true是捕获阶段触发，不写（默认是false）则是冒泡阶段触发。
IE8以及以下不存在事件的捕获，只有事件的冒泡。

方法

stopPropagation() 阻止冒泡

preventDefault() 阻止默认动作

  <a href="http://www.so.com" onclick="fn(event)">我是超链接</a>
  <script>
  	function fn(ev){
  		alert("弹出")；
  		ev.preventDefault();//阻止a的默认动作，也就是说不会跳转到http://www.so.com。。。
  	}
  </script>