JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解

2024-05-06 16:20:45

字體：大中小

來源：轉載

供稿：網友

對于js初學著必須理解this和srcElement的應用，這也是面試中經?？嫉降?。下面我們就通過幾個示例來詳細了解下

我們先看一個簡單的例子：

代碼如下:

<input type="text" onblur="alert(this.value)"/>完全沒有問題。

完全沒有問題。

那么什么情況下不可以用?

fuction method()

{

alert(this.value);

}

<input type="text" onblur="method()"/>

這個就不可以，因為method()是被響應函數調用的函數。

那么這種情況下怎么辦?

方法一:

fuction method(btn)

{

alert(btn.value);

}

<input type="text" onblur="method(this)"/>

沒問題!

方法二：

fuction method()

{

alert(window.event.srcElement.value);

}

<input type="text" onblur="method()"/>

沒問題!window.event.srcElement取得觸發事件的控件

我們在看一個稍微繞一點的例子

<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>

</head>

<body onload="InitEvent()">

<input id="Text1" type="text" />

<input id="Text2" type="text" />

<input id="Text3" type="text" />

</body>

</html>

我們再來看看2者之間的區別和聯系

this：

下面先看一個例子：

<html>

<title>this與srcElement的區別</title>

<head>

<script type="text/javascipt>"

function btnClick(){

alert(this.value);

}

</script>

</head>

<body>

<input type="button" value="單擊" onclick="btnClick()"/>

</body>

</html>

此時彈出的答案為“undefined”，說明在調用函數時不能使用this.屬性來獲取。再看下一個例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>無標題頁</title>

<script type="text/javascript">

function btnClick(btn){

alert(btn.value);

}

</script>

</head>

<body>

<input type="button" onclick="btnClick(this)" value="單擊" />

</body>

</html>

此時得出的答案為“單擊”，此時為什么可以呢?從代碼中可以看出，在onclick事件調用函數btnClick()時，將this當作參數傳遞給了函數。

綜合以上：在函數調用時不能直接使用this.屬性來獲取，而必須將this當作參數傳遞。

window.event.srcElement:

下面看一個例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>無標題頁</title>

<script type="text/javascript">

function btnClick(){

alert(window.event.srcElement.value);

}

</script>

</head>

<body>

<input type="button" onclick="btnClick()" value="單擊" />

</body>

</html>