window.event.srcElement與window.event.target 都是指向觸發事件的元素,它是什么就有什么樣的屬性
srcElement是事件初始化目標html元素對象引用,因為事件通過元素層次冒泡,可以在任意一層進行處理,
有了元素的引用,就可以讀寫改元素的屬性。
IE瀏覽器支持window.event.srcElement , 而firefox支持window.event.target;
我們先看一個簡單的例子:
<input type="text" onblur="alert(this.value)"/>完全沒有問題,能彈出框內容是text文本框里的文本內容。
fuction method(){
alert(this.value);}
<input type="text" onblur="method()"/>這個就不可以,彈出框的內容是undefined,因為method()是被響應函數調用的函數。
也就是說,當描述某個事件時,直接想要獲得該事件目標元素的value值是不行的,
這時候就需要先獲取目標元素,再提取之中的value值。
可以做如下改動:
方法一:先使用this指向觸發該onblur事件的目標元素,再提取之中的value值,代碼如下
function method(this){alert(this.value);}
方法二:先通過window.event.srcElement(IE瀏覽器支持)或者window.event.target(FireFox瀏覽器支持)先指向觸發該onblur事件的目標元素,再提 取之中的value值,代碼如下
function method(){alert(window.event.srcElement.value);}
<input type="text" onblur="method()"/>
下面再看一個復雜點的例子
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
function InitEvent() {
var inputs = document.getElementsByTagName_r("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onblur = OnblurEvent;
}
}
function OnblurEvent() {
// OnblurEvent是onblur的響應函數,而不是被響應函數調用的函數
// 所以可以用this來獲取發生事件的對象
if (this.value.length > 0) {
this.style.backgroundColor = "white";
}
else {
this.style.backgroundColor = "red";
}
}
</script>
<body onload="InitEvent()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
</body>
</html>
執行后,可以看到若在文本框內鍵入文本內容,失去焦點時文本框背景顏色為白色不變,但若文本框內沒有文本內容就失去焦點,則背景顏色變為紅色。