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

Event对象

Event种类

• mouseEvent
• keyboardEvent
• focusEvent
• 
  //这里的参数必须写event(也就是window.event)，如果不写则console的结果就是undefined。
  
  
  /onblur（失去焦点时触发）同onfocus（得到焦点时触发）都是 焦点事件（focusEvent）/

属性

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

• clientY 只有鼠标事件才有

• keyCode 只有键盘事件才有

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

  具体代码如下(点document中的任何元素都会变绿)：
  document.onclick=function(ev){
  ev.target.style.backgroundColor="green";
  }
  //可以给新添加的元素绑定事件
  代码：
  css样式：
  
  html文件：
  

  多个
  
  添加
  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() 阻止默认动作

  我是超链接