處理事件對象的兼容性

1.window.event

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

首先判斷時候有參數(shù)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.事件監(jiān)聽

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


10.7日更新問題:
使用事件委托為li標簽添加移入變色,并且在輸入框輸入對應數(shù)字后點擊禁止變色按鈕,該li取消事件。
效果如下:

變色.gif

HTML:

  <ul id="test">
    <li>1</li>
    <li>
      <div>
        d
      </div>
    </li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <input type="text" id="num">
  <input type="button" id="btn1" value="新增">
  <input type="button" id="btn2" value="禁止變色">

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循環(huán)中的語句:
如果源是li標簽,并且源不屬于輸入框中所輸入的索引,則執(zhí)行。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容