📂 JAVASCRIPT/Event
[ 자바스크립트 ] onfocusin & onfocusout 🕔 2016. 11. 30. 13:15
최종 수정일 : 2016. 12. 1.
[ Javascript ] onfocusin & onfocusout
Example 1
마우스 버튼으로 클릭하거나, 키보드의 Tab키를 이용하여,
( 또는 Shift + Tab ),
아래의 입력란과 링크 사이를 이동해보세요.
By clicking the mouse button, or using the Tab
(or Shift + Tab) key on the keyboard,
move between the input field and link, below.
☞ Example 1
<h1 id="exam1">Example 1 </h1>
<p>마우스 버튼으로 클릭하거나, 키보드의 Tab 키를 이용하여 ( 또는 Shift + Tab ), <br />
아래의 입력란과 링크 사이를 이동해보세요. <br /><br />
By clicking the mouse button, or using the Tab (or Shift + Tab) key on the keyboard, <br />
move between the input field and link, below. </p><br />
<input id="myInput" type="text" value="Click me" onfocusin="getFocus()" onfocusout="loseFocus()" /> <br /><br />
☞ <a href="#exam1">Example 1</a> <br /><br />
<script type="text/javascript">
var tag = document.getElementById( "myInput" );
function getFocus (){ tag.style.backgroundColor = "yellow"; }
function loseFocus (){ tag.style.backgroundColor = "pink"; }
</script>
Example 2
파이어폭스에서는 onfocusin과 onfocusout이 작동하지 않는다. 그 대신, addEventListener()를 이용한다.
In Firefox, onfocusin & onfocusout does not work. Use addEventListener().
☞ Example 2
<h1 id="exam2">Example 2 </h1>
<input id="myInput" type="text" value="Click me" /> <br /><br />
☞ <a href="#exam2">Example 2</a> <br /><br />
<script type="text/javascript">
var tag = document.getElementById( "myInput" );
function testing ( event ){
event = event || window.event;
var type = event.type;
if ( type == "focus" || type == "focusin" ){ tag.style.backgroundColor = "yellow"; }
else { tag.style.backgroundColor = "pink"; }
}
if ( "onfocusin" in tag ){
if ( tag.addEventListener ){
tag.addEventListener( "focusin", testing );
tag.addEventListener( "focusout", testing );
}
else if ( tag.attachEvent ){
tag.attachEvent( "onfocusin", testing );
tag.attachEvent( "onfocusout", testing );
}
}
else if ( tag.addEventListener ){
tag.addEventListener( "focus", testing, true );
tag.addEventListener( "blur", testing, true );
}
</script>
Example 3
| onFocusIn | onFocusOut | |
|---|---|---|
| target | ||
| srcElement | ||
| currentTarget | ||
| relatedTarget | ||
| explicitOriginalTarget | ||
| originalTarget | ||
| fromElement | ||
| toElement | ||
| 실행 횟수 count of execution |
☞ Example 3
<div id="myDiv">
<h1 id="exam3">Example 3 </h1>
<table border="1">
<thead>
<tr><th style="width: 150px"> </th><th style="width: 140px"> onFocusIn </th><th> onFocusOut </th></tr>
</thead>
<tbody>
<tr><td> target </td><td> </td><td> </td></tr>
<tr><td> srcElement </td><td> </td><td> </td></tr>
<tr><td> currentTarget </td><td> </td><td> </td></tr>
<tr><td> relatedTarget </td><td> </td><td> </td></tr>
<tr><td> explicitOriginalTarget </td><td> </td><td> </td></tr>
<tr><td> originalTarget </td><td> </td><td> </td></tr>
<tr><td> fromElement </td><td> </td><td> </td></tr>
<tr><td> toElement </td><td> </td><td> </td></tr>
<tr><td> count of execution </td><td> </td><td> </td></tr>
</tbody>
</table>
<br />
☞ <a href="#exam3">Example 3</a> <br /><br />
<input type="text" value="Click me" /> <br /><br />
<select><option> Apple </option><option> Banana </option></select><br /><br />
</div>
<script type="text/javascript">
var div = document.getElementById( "myDiv" );
var table = div.getElementsByTagName( "table" )[ 0 ];
var countIn = 0;
var countOut = 0;
function testing ( event ){
event = event || window.event;
var type = event.type;
if ( type == "focus" || type == "focusin" ){
countIn++;
var index = 1;
var count = countIn;
}
else {
countOut++;
var index = 2;
var count = countOut;
}
var rows = table.rows;
var identifyTargeting = function ( targeting, row ){
if ( targeting ){ row.cells[ index ].innerHTML = targeting.nodeName; }
else if ( targeting === null ){ row.cells[ index ].innerHTML = "null"; }
else { row.cells[ index ].innerHTML = targeting; }
};
identifyTargeting( event.target , rows[1] );
identifyTargeting( event.srcElement , rows[2] );
identifyTargeting( event.currentTarget , rows[3] );
identifyTargeting( event.relatedTarget , rows[4] );
identifyTargeting( event.explicitOriginalTarget , rows[5] );
identifyTargeting( event.originalTarget , rows[6] );
// IE 8 and lower
identifyTargeting( event.fromElement , rows[7] );
identifyTargeting( event.toElement , rows[8] );
rows[ 9 ].cells[ index ].innerHTML = count;
}
if ( "onfocusin" in div ){
if ( div.addEventListener ){
div.addEventListener( "focusin", testing );
div.addEventListener( "focusout", testing );
}
else if ( div.attachEvent ){
div.attachEvent( "onfocusin", testing );
div.attachEvent( "onfocusout", testing );
}
}
else if ( div.addEventListener ){
div.addEventListener( "focus", testing, true );
div.addEventListener( "blur", testing, true );
}
</script>
Example 4
| onFocusIn | onFocusOut | |
|---|---|---|
| target | ||
| srcElement | ||
| currentTarget | ||
| relatedTarget | ||
| explicitOriginalTarget | ||
| originalTarget | ||
| fromElement | ||
| toElement | ||
| 실행 횟수 count of execution |
☞ Example 4
<h1 id="exam4">Example 4 </h1>
<table id="myTable" border="1">
<thead>
<tr><th style="width: 150px"> </th><th style="width: 140px"> onFocusIn </th><th> onFocusOut </th></tr>
</thead>
<tbody>
<tr><td> target </td><td> </td><td> </td></tr>
<tr><td> srcElement </td><td> </td><td> </td></tr>
<tr><td> currentTarget </td><td> </td><td> </td></tr>
<tr><td> relatedTarget </td><td> </td><td> </td></tr>
<tr><td> explicitOriginalTarget </td><td> </td><td> </td></tr>
<tr><td> originalTarget </td><td> </td><td> </td></tr>
<tr><td> fromElement </td><td> </td><td> </td></tr>
<tr><td> toElement </td><td> </td><td> </td></tr>
<tr><td> count of execution </td><td> </td><td> </td></tr>
</tbody>
</table>
<br />
☞ <a href="#exam4">Example 4</a> <br /><br />
<input id="myInput" type="text" value="Click me" /> <br /><br />
<select><option> Apple </option><option> Banana </option></select><br /><br />
<script type="text/javascript">
var table = document.getElementById( "myTable" );
var input = document.getElementById( "myInput" );
var countIn = 0;
var countOut = 0;
if ( "onfocusin" in input ){
if ( input.addEventListener ){
input.addEventListener( "focusin", testing );
input.addEventListener( "focusout", testing );
}
else if ( input.attachEvent ){
input.attachEvent( "onfocusin", testing );
input.attachEvent( "onfocusout", testing );
}
}
else if ( input.addEventListener ){
input.addEventListener( "focus", testing, true );
input.addEventListener( "blur", testing, true );
}
function testing ( event ){
event = event || window.event;
var type = event.type;
if ( type == "focus" || type == "focusin" ){
countIn++;
var index = 1;
var count = countIn;
}
else {
countOut++;
var index = 2;
var count = countOut;
}
var rows = table.rows;
var identifyTargeting = function ( targeting, row ){
if ( targeting ){ row.cells[ index ].innerHTML = targeting.nodeName; }
else if ( targeting === null ){ row.cells[ index ].innerHTML = "null"; }
else { row.cells[ index ].innerHTML = targeting; }
};
identifyTargeting( event.target , rows[1] );
identifyTargeting( event.srcElement , rows[2] );
identifyTargeting( event.currentTarget , rows[3] );
identifyTargeting( event.relatedTarget , rows[4] );
identifyTargeting( event.explicitOriginalTarget , rows[5] );
identifyTargeting( event.originalTarget , rows[6] );
// IE 8 and lower
identifyTargeting( event.fromElement , rows[7] );
identifyTargeting( event.toElement , rows[8] );
rows[ 9 ].cells[ index ].innerHTML = count;
}
</script>
이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*
If this article is helpful to you, please click the heart button below. *^^*
'JAVASCRIPT > Event' 카테고리의 다른 글
| [ 자바스크립트 ] target (0) | 2016.12.14 |
|---|---|
| [ 자바스크립트 ] 마우스 포인터의 현재 위치 알아내기 (0) | 2015.08.10 |