Home > Developer > JavaScript
Window.event.srcElement and Window.event.target are all elements that point to the triggering event and what kind of property it is.
Srcelement is an event initialization target HTML element object reference because the event bubbles through the element hierarchy and can be processed at any level.
With the reference to the element, you can read and write the attributes of the element.
IE browser supports window.event.srcElement, while Firefox supports Window.event.target;
Let's look at a simple example:
<input type= "text" onblur= "alert (this.value)"/> No problem at all, can pop-up box content is text content in text box .
Fuction Method () {
alert (this.value); }
<input type= "text" onblur= "Method ()"/> This is not possible, the content of the popup box is undefined, because method () is The function that is called by the response function.
That is, when describing an event, it is not possible to directly want to get the value of the event target element.
At this point, you need to get the target element, and then extract the value in.
The following changes can be made:
Method One: First use this to point to the target element that triggers the onblur event, and then extract the value values in the code as follows
function method (this) {alert (this.value);}
Method Two: first by window.event.srcElement (ie browser support) or Window.event.target (Firefox browser support) point to trigger the onblur event target element, and then extract the Val UE value, code as follows
Function method () {alert (window.event.srcElement.value);}
<input type= "Text" onblur= "method ()"/>
Let's look at a more complicated example.
<meta charset= "UTF-8" >
<title></title>
<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 is a onblur response function, not a function called by a response function
//So you can use this to get the object where the event occurred
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>
When you are done, you can see that if you type text inside the text box, the background color of the text box is white when you lose focus, but the background color changes to red if no text content in the text box loses focus.
The target event property in JavaScript, the acquisition of the destination node of the event.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
