处理事件对象的兼容性

1.window.event

(function(){
 var evt = evt ? evt : (window.event ? window.event : null);
 console.log(evt);
})()

首先判断时候有参数event对象传入，其次判断是否是IE的事件对象window.event

2.键盘值的取得
IE下 event.keyCode
Firefox下event.which

function myKeyPress (evt) {
 var evt = evt ? evt : (window.event ? window.event : null); //获取事件对象
 var key = evt.keyCode ? evt.keyCode : evt.which;
}

3.事件源的获取
IE下 event对象有srcElement属性，没有target属性
Firefox下 event对象有target属性，没有srcElement属性

var ele = function (evt) {
 evt = evt || window.event;
 return event.srcElement ? event.srcElement : event.target;
}

4.事件监听

5.鼠标位置
IE下event.x/y
其他下event.pageX

---

10.7日更新问题：
使用事件委托为li标签添加移入变色，并且在输入框输入对应数字后点击禁止变色按钮，该li取消事件。
效果如下：

变色.gif

HTML:

  

    
1
    

      

        d
      
    
    
3
    
4
    
5
    
6
  
  
  
  

JS:

var oUl = document.getElementById("test");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var a;
var element;
//console.log(oUl.tagName);
oUl.addEventListener("mouseover",function(e){
  e = e || window.event;
  //console.log(e);
  var target = e.target || e.srcElement;
  //console.log(e.nodeName);
  while(target.nodeName !== "UL"){
    if(target.nodeName == "LI" && target !== element){
      target.style.color = "red";
      break;
    }
    target = target.parentNode;
  }
})
oUl.addEventListener("mouseout",function(e){
  e = e || window.event;
  //console.log(e);
  target = e.target || e.srcElement;
  //console.log(e);
  while(target.nodeName !== "UL"){
    if(target.nodeName == "LI" && target !== element){
      target.style.color = "black";
      break;
    }
    target = target.parentNode;
  }
})
btn1.onclick = function(){
  //console.log(this.nodeName);
  var oLi = document.createElement("li");
  oLi.innerHTML = "新增";
  oUl.appendChild(oLi);
}
btn2.onclick = function(){
  var li = document.querySelectorAll("li");
  a = +document.getElementById("num").value;
  a--;
  element = li[a];
  // console.log(element);
}

其中重点是：while循环中的语句：
如果源是li标签，并且源不属于输入框中所输入的索引，则执行。