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;
}
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í)行。