[JS] event 객체

event 객체

: 전역객체, 모든 태그에 객체 참조가 가능

• a태그와 butto태그에 주로 참조시켜
  •   => 클릭에 대한 반응을 기대할 수 있도록 만드는 구조가 일반적
• a태그 : href 속성에 의해 자체 이동이 구현되어 있음 = 이동을 막는 코드 필요
• button태그 : 자주 사용

 

부여하는 방법 

: 각자 목적과 작동방식이 다름

• 화면 출력영역 : document 영역 (객체) 
• 태그 = html element / 속성 = attribute / 텍스트 = textNode

출력하는 방법

1.  html 태그로 출력 : innerHTML이라는 property 사용

2.  text로 출력 : innerTEXT라는 property 사용

 

객체의 값을 가져오는 경우 

1. id의 값 : getElementById('id명')
2. class의 값 : querySelecter('태그명') // getElementById보다 큰 범위

 

사용 예

1. function 에 넣는 방법

<button type="button" onclick="javascript:evenFunc();">클릭1</button>
<button onclick="evenFunc2(100);">클릭2</button>
<!-- type 사용은 선택 -->

<h1 id="printResult">

<script>
        function evenFunc(){
            let printResult = document.getElementById('printResult');
            printResult.innerText = '클릭1 버튼을 클릭하면 이 글자가 나타남';
        }
        function evenFunc2(num){
            let printResult = document.getElementById('printResult');
            printResult.innerHTML = `<span style="color:blue;">span태그 사용. ${num} </span>`+num;
        }
</script>

 

2. alert로 띄우는 방법

// 바로 지정
<button type="button" onclick="alert('경고창띄우기')">alert</button>

// 따로 지정
<button type="button" id="testBtn">test</button>

<script>
        document.getElementById('testBtn').addEventListener('click',() => {
            alert('test버튼을 클릭해 띄운 alert')
        })

</script>