JS_javascript 기술의 THIS 및 WINDOW.EVENT.SRCELEMENT에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:57:491316검색
먼저 간단한 예를 살펴보겠습니다.
bfe7eeca3a6509d56660467e0e7b502c전혀 문제 없습니다.
그럼 어떤 상황에서는 사용할 수 없나요?
fuction method()
{
alert(this.value);
}
<input type="text" onblur="method()"/>
method()는 response 함수에 의해 호출되는 함수이기 때문에 불가능합니다.
그러면 이런 상황에서는 어떻게 해야 할까요?
방법 1:
fuction method(btn)
{
alert(btn.value);
}
<input type="text" onblur="method(this)"/>
문제없어요!
방법 2:
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>
둘의 차이점과 연관성을 살펴보겠습니다
이것:
예를 살펴보겠습니다.
<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>
이때 뜨는 답변은 "정의되지 않음"입니다. 이는 함수 호출 시 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를 매개변수로 전달해야 합니다.
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>
이번에 얻은 답은 "click"인데, 함수 호출 시 window.event.srcElement 속성을 이용하면 얻을 수 있다는 뜻입니다.
이것은 왜 직접 사용할 수 없고 window.event.srcElement를 직접 사용할 수 있나요? 순전히 문자 그대로의 의미에서는 "현재"를 의미합니다. 함수 호출 시 특정 컨트롤을 지정하지 않으며 함수 내에서 직접 사용할 수 없습니다. 두 번째 코드에서는 이를 매개변수로 전달하므로 정답을 얻을 수 있습니다.
사실이것과 window.event.srcElement 사용의 차이점은: this.속성을 직접 사용하려면 이때 함수를 호출할 수 없지만 응답 함수여야 합니다. , window.event.srcElement에는 그러한 제한이 없습니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.