[Event] JQ - event.target 속성 - 이벤트 촉발시킨 요소 반환/확인. (= event.target속성 = 이벤트타겟 속성)

1. event.target 예제 - 이벤트 촉발 요소 확인
2. event.target 정의
3. event.target 구문
4. event.target 속성에 포함된 값들

event.target 예제 - 이벤트 촉발 요소 확인

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p, button, h1").click(function(event){

    $("div").html("이벤트 촉발 요소 : " + event.target.nodeName);

  });

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 강의</p>

<button>클릭</button>

<div style="color:blue;" />

 

결과보기

event.target 정의

 

이벤트를 촉발시킨 요소 반환.

 

---

 

※ 이벤트가 이벤트 확산(= event bubbling)에 의한 것인지 확인할 때 유용.

 

event.target 구문

 

event.target

 

---

[매개변수]

 

event

필수. 이벤트에 바인딩 된 함수에서 가져옴.

 

event.target 속성에 포함된 값들

 

<script type="text/javascript" >

window.onload = function() {

btn_id.onclick = btnclick;

}

function btnclick() {

var message = 

//이벤트의 종류

"<br/>이벤트 종류 : " + 

event.type + "<br/>" +

//이벤트가 발생한 오브젝트 정보

"<br/>이벤트가 발생한 오브젝트 정보<br/>" + 

"event.target : " + event.target + "<br/>" +

"event.target.id : " + event.target.id + "<br/>" +

"event.target.name : " + event.target.name + "<br/>" +

"event.target.value : " + event.target.value + "<br/>" + 

"event.target.nodeType : " + event.target.nodeType + "<br/>" + 

"event.target.nodeName : " + event.target.nodeName + "<br/>" + 

"event.target.parentNode.nodeName : " + event.target.parentNode.nodeName + "<br/>" + 

"event.target.parentNode.id : " + event.target.parentNode.id + "<br/>" + 

"event.target.nextSibling.nextSibling.id : " + event.target.nextSibling.nextSibling.id + "<br/>" + 

"event.target.parentNode : " + event.target.parentNode + "<br/>" + 

"event.target.parentElement : " + event.target.parentElement + "<br/>" +

"event.srcElement.value : " + event.srcElement.value  + " ==> srcElement == target ( 브라우저에 따라 다름 )"//srcElement == target ( 브라우저에 따라 다름 );

show(display_btn,message);

}

function keyclick(){

var message = 

//이벤트의 종류

"<br/>이벤트 종류 <br/>" + 

event.type + "<br/>" + 

event.keyCode + "<br/>" + 

event.which + "<br/>";

show(message);

}

function show(where,message){

where.innerHTML = message; 

}

</script>

<h4>이벤트의 대상 정보 출력 (event.target)</h4>

<div id = "btndiv">

<input type="button" id="btn_id" name="btn_name" value="버튼01"/>

<div id = "display_btn"></div>

</div>

<div id = "display"></div>

 

---

[결과값]

 

이벤트 종류 : click

이벤트가 발생한 오브젝트 정보

event.target : [object HTMLInputElement]

event.target.id : btn_id

event.target.name : btn_name

event.target.value : 버튼01

event.target.nodeType : 1

event.target.nodeName : INPUT

event.target.parentNode.nodeName : DIV

event.target.parentNode.id : btndiv

event.target.nextSibling.nextSibling.id : display_btn

event.target.parentNode : [object HTMLDivElement]

event.target.parentElement : [object HTMLDivElement]

event.srcElement.value : 버튼01 ==> srcElement == target ( 브라우저에 따라 다름 )

 

정보출처: https://sourcestudy.tistory.com/207

관련글: 

https://developer.mozilla.org/en-US/docs/Web/API/Event

https://developer.mozilla.org/en-US/docs/Web/API/Event/target