8. 이벤트(event)

  JS의 이벤트(event)

웹 페이지 내에서 마우스를 클릭하거나, 키를 입력했을 때, 혹은 특정 요소로 포커스가 이동했을 때 어떤 사건을 발생시키는 것을 이벤트(event)라고 한다.

  다양한 이벤트 처리

1. onload : 브라우저가 모든 페이지를 로딩한 후 실행

 

2. onmouseover : 마우스가 영역 위로 올라왔을 경우 실행

 

3. onmouseout : 마우스가 영역 밖으로 벗어났을 경우 실행

 

4. onclick : 마우스를 클릭했을 경우 발생

 

5. onkeyup : 눌린 키가 떨어졌을 경우 발생

 

6. onkeydown : 키보드의 키가 눌렸을 경우 발생

 

7. onchange : 해당 요소에서 변화가 있을 경우 발생

  스크린 사이즈 이벤트

브라우저 및 모니터의 스크린 사이즈를 알아볼 수 있는 이벤트도 있다.

<script>
    var ww = window.innerWidth;     // 브라우저의 가로길이
    var wh = window.innerHeight;    // 브라우저의 세로길이

    document.getElementById("winSize").innerHTML = "브라우저 사이즈 : " + ww + " x " + wh;

    var sw = screen.width;
    var sh = screen.height;

    document.getElementById("screenSize").innerHTML = "모니터 사이즈 : " + sw + " x " + sh;

    var aw = screen.availWidth;
    var ah = screen.availHeight;

    document.getElementById("availSize").innerHTML = "모니터(작업표시줄 제외) 사이즈 : " + aw + " x " + ah;
</script>

  addEventListener

addEventListener는 event를 깔끔하게 작업하기 위해 사용한다.

 

사용법)

        document.addEventListener(event, function)

        => event - 사용할 이벤트, function - 함수이름

 

VS code를 사용할 시 event칸에 ""를 넣으면 자동으로 사용할 수 있는 이벤트 내역이 뜬다.

<script>
    var box = document.getElementById("box");
    
    box.addEventListener("click",click); // 클릭했을 때 발생하는 이벤트
    box.addEventListener("dblclick",dblclick); // 더블(dbl)클릭 했을 때 발생하는 이벤트
    box.addEventListener("mouseenter",mouseenter); // 마우스가 영역 안으로 들어왔을 때 발생하는 이벤트
    box.addEventListener("mouseout",mouseout); // 마우스가 영역 밖으로 나갔을 때 발생하는 이벤트

    function click(){
        box.innerHTML = "click!!";
        box.style.backgroundColor = "orange";
    }

    function dblclick(){
        box.innerHTML = "dblclick!!";
        box.style.backgroundColor = "blue";
    }

    function mouseenter(){
        box.innerHTML = "mouseenter!!";
        box.style.backgroundColor = "red";
    }

    function mouseout(){
        box.innerHTML = "mouseout!!";
        box.style.backgroundColor = "pink";
    }

</script>