JS -이벤트 핸들러

이벤트란? 

화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다.

자바스크립트의 첫번째 강력한 기능 이며 사용방법만 암기하면 충분합니다.

태그와 스크립트의 이벤트를 연결하는 방식에는

 

인라인 이벤트모델, 기본 이벤트 모델, 표준 이벤트 모델 이 있으며 이벤트 앞에  on을 붙입니다.

---

인라인 이벤트 모델

 

- 인라인 이벤트 모델은 html 요소에 직접 이벤트를 연결하는 방식입니다. 

태그 안에 이벤트 종류가 들어가며 on 이 붙습니다. 

onclick 같은 이벤트 안에는 모든 스크립트 코드가 들어갈 수 있습니다. 

예시
<button onclick="console.log('출력')">

예시2
<button onclick="check()">인라인이벤트</button>

<script>
function check(){
alert("인라인이벤트)";} </script>

1. onclick 은 일반적으로 가장 많이 사용되는 이벤트 입니다. 

2. 동일한 함수에 여러 이벤트를 걸어줄 수 있습니다.

3.이때 어떤 이벤트에 대한 동작인지 확인하는 키워드는 this 입니다. 

 <h3>여러버튼에 인라인 이벤트 적용하기</h3>
    <button type ="button" onclick="check2(this)" id="a">1</button>
    <button type ="button" onclick="check2(this)" id="b">2</button>
    <button type ="button" onclick="check2(this)" id="c">3</button>
    <button type ="button" onclick="check2(this)" id="d">4</button>
    
     <script>
 function check2(x){
             //console.log("이벤트실행됨")
            console.log(x)
            console.log(x.type)    
            console.log(x.id)

            
            x.innerHTML =x.id; //
        }
     </script>

인라인 이벤트 예시입니다 화면에서는 어떻게 나오는지 보겠습니다. 

숫자 1을 누르면 x.innerHTML=x.id 로 인해 1에 id값으로 변경해버립니다. 그리고 onclick 구문안에  this 를 넣으므로 같은 변수이름이지만 확연하게 알수있습니다. 

 

기본 이벤트 

<script>
window.onload=function(){
function test(){
console.log("출력");
}
var bt =document.getElementById("bt")' <-----------요소취득 명령
bt.onclick=test;}           <----------------------
</script>
<button id="bt">인라인이벤트</button> <-------취득할 요소

 

앞에서 확인 했던 익명함수 방식은 이렇게도 사용가능 합니다.

단 함수 호출시 () 를 붙이지 않습니다

() 를 붙이면 코드 실행시 무조건 함수가 한번 실행 되 버립니다.

 

표준 이벤트

<script>
window.onlod=fuciton() {

var bt=document.getElementById("bt");				<---취득할 요소
function view(){
console.log("출력");}
bt.addEventListener('click',view);}				<-----이벤트에 on을 붙이지 않습니다.
</script>
<button id="bt">인라인 이벤트</button>

 

표준이벤트로 구성된 쉬운 코드입니다. 

코드를 실행하면 두개의 바가 있는데 클릭시 이동할래라는 문구가 뜨고 확인을 누르면 연결된 사이트로 이동이 됩니다. 

 

alert 에서 확인은 true이고 취소는 false를 나타냅니다. 

 

document.getElementById는 잘 쓰여지기 때문에 외우시는게 편리합니다.