ふたりで

javascript event.target.~~~ 으로 가져오기. 본문

javascript

javascript event.target.~~~ 으로 가져오기.

graykang 2019. 12. 16. 18:00
728x90
반응형
SMALL

event.target 으로 참조할 수 있는 것들...

<menu>
  <button class="js_btnEvent_Target" id="btnEvent_Target" data-aa="A" data-bb="B">이벤트.타겟</button>
  <q id="showEvent"></q>
</menu>

<script>
var buttonclick = document.getElementById('btnEvent_Target');
buttonclick.addEventListener('click', function()
  {
    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.target.getAttribute('data-aa') : " + event.target.getAttribute("data-aa") + "<br/>" + 
  "event.target.getAttribute('class') : " + event.target.getAttribute("class") + "<br/>" + 
  "event.srcElement.value : " + event.srcElement.value  + " ==> srcElement == target ( 브라우저에 따라 다름 )"//srcElement == target ( 브라우저에 따라 다름 );
   
   document.getElementById('showEvent').innerHTML = message;
  }
);
</script>

 

728x90
반응형
LIST
Comments