[JavaScript] 마우스 이벤트, 키보드와 스크롤 이벤트

마우스 이벤트 종류

• mousedown/mouseup : 요소 위에서 마우스 왼쪽 버튼을 누를 때, 마우스버튼을 누르고 있다가 뗄 때
• mouseover/mouseout : 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 커서가 요소 위에 있다가 요소 밖으로 움직일 때
• mousemove : 마우스를 움직일 때
• click : 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때
• contextmenu : 마우스 오른쪽 버튼을 눌렀을 때

    <div id="area1" class="area"></div>

    <script>
        let btn1 = document.querySelector("#btn1");
        let area1 = document.querySelector("#area1");
        btn1.onmousedown = (event) => area1.insertAdjacentHTML('beforeend', 'mousedown button=' + event.button + "<br>");
        btn1.onmouseup = (event) => area1.insertAdjacentHTML('beforeend', 'mouseup button=' + event.button + "<br>");
        btn1.onclick = (event) => area1.insertAdjacentHTML('beforeend', 'click button=' + event.button + "<br>");
        btn1.oncontextmenu = (event) => area1.insertAdjacentHTML('beforeend', 'contextmenu button=' + event.button + "<br>");
        btn1.ondblclick = (event) => area1.insertAdjacentHTML('beforeend', 'dblclick button=' + event.button + "<br>");
    </script>

- 마우스 왼쪽 : 0

- 마우스 오른쪽 : 2

- 휠(가운데) 클릭 : 1

- 마지막 더블클릭까지 확인됨

 

---

마우스 이벤트 좌표

클라이언트 좌표(clientX, clientY)
: 웹 문서를 기준으로 각각 왼쪽에서 얼마나 떨어져 있는지, 위에서 얼마나 떨어져 있는지

    <script>
        let span1 = document.querySelector("#span1");
        span1.onmouseover = () => span1.innerHTML = event.clientX + ":" + event.clientY;
    </script>

마우스를 올려보세요 부분에 올리면 좌표가 표시된다. 

 

---

선택 막기, 복사 막기

글씨 선택 막기 : mousedown 이벤트가 발생할 때 나타나는 브라우저 기본 동작 막기
글씨 복사 막기 : oncopy 이벤트 기본 동작 막기

    <span ondblclick="alert('클릭되었습니다');" onmousedown="return false;">
    이 영역은 더블 클릭해도 선택되지 않도록 합니다
    </span>

    <div oncopy="alert('복사 불가능입니다!'); return false;">
        이 편지는 영국에서 최초로 시작되어 일년에 한 바퀴 돌면서
        받는 사람에게 행운을 주었고 당신에게로 옮겨진 이 편지는
        4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을
        행운이 필요한 사람에게 보내 주셔야 합니다. 
    </div>

---

키보드 이벤트 종류

• keydown : 키를 누를 때
• keyup : 키를 놓을 때

키보드 이벤트 테스트

    <input type="text" id="content" placeholder="아무 키나 입력하세요">

event.key : 문자
event.code : 물리적인 키 코드
Ex. 소문자 a를 입력하면 event.key=a event.code=keyA
대문자 A를 입력하면 event.key=A event.code=keyA

    <div id="area1" class="area"></div>

    <script>
        let content = document.querySelector("#content");
        let area1 = document.querySelector('#area1');

        content.onkeydown = () => area1.insertAdjacentHTML('beforeend', 'keydown event.key=' + event.key + ", event.code=" + event.code + "<br>");
        content.onkeyup = () => area1.insertAdjacentHTML('beforeend', 'keyup event.key=' + event.key + ", event.code=" + event.code + "<br>");
    </script>

---

전화번호 입력 받기

    <input type="tel" placeholder="전화번호를 입력하세요"
    onkeydown="return checkPhoneNumber(event.key)">

    <script>
        function checkPhoneNumber(key){
            return (key >= '0' && key <= '9') || key == '-' || 
            key == 'ArrowLeft' || key == 'ArrowRight' || 
            key == 'Delete' || key == 'Backspace';
        }
    </script>

---

스크롤 이벤트

마우스의 스크롤을 움직였을 때 발생하는 이벤트로 컨텐츠 내용 더보기 등에 사용할 수 있음
element.scrollHeight : 요소 스크롤 뷰 높이
element.scrollTop : 요소 세로 스크롤 위치
element.scrollLeft : 요소 왼쪽 스크롤 위치
element.clientHeight : 요소 안쪽 높이

 

스타일 지정

        .imageArea{
            margin : 20px;
            border: 2px solid lightgray;
            height : 200px;
            overflow-y : scroll;
        }

    <div class="imageArea"></div>

    <script>
        // 추가할 이미지 목록
        let imageArr = ['pikachu.png', 'pikachu2.png', 'pikachu3.jpg'];
        //div영역
        let imageArea = document.querySelector(".imageArea");
        let index = 0;

        //문서 로드시 이미지 추가
        addImage(imageArr[index]);

        //fileName 전달 받아 해당 이미지를 div에 추가하는 함수
        function addImage(fileName){
            let html = '';
            for(let i = 0; i < 36; i++){
                html += "<img src='../resources/images/" + fileName + "' width='100' height='100'>"
            }
            imageArea.innerHTML += html;
        }
    </script>

36개의 피카추사진이 36장으로 나오고,

정해진 크기가 넘어가서 스크롤바가 생겼다.

        imageArea.addEventListener('scroll', function(){
            console.log("imageArea 높이 : " + imageArea.clientHeight);
            console.log("imageArea 스크롤 위치 : " + imageArea.scrollTop);
            console.log("imageArea 스크롤 높이 : " + imageArea.scrollHeight);
            //스크롤바를 가장 끝까지 내렸을 때
            //스크롤 위치 + 요소 높이 == 스크롤 높이
            if(imageArea.scrollTop + imageArea.clientHeight == imageArea.scrollHeight){
                index = ++index < imageArr.length ? index : index - imageArr.length;
                addImage(imageArr[index]);
            }
        });

 

        // 스크롤 이벤트
        imageArea.addEventListener('scroll', function(){
            console.log("imageArea 높이 : " + imageArea.clientHeight);
            console.log("imageArea 스크롤 위치 : " + imageArea.scrollTop);
            console.log("imageArea 스크롤 높이 : " + imageArea.scrollHeight);
            // 스크롤바를 가장 끝까지 내렸을 떄
            // 스크롤 위치 + 요소 높이 == 스크롤 높이
            if(imageArea.scrollTop + imageArea.clientHeight == imageArea.scrollHeight) {
                index = ++index < imageArr.length ? index : index - imageArr.length;
                addImage(imageArr[index]);
            }
        });

다른 종류의 이미지 2개가 무한대로 스크롤을 내릴때마다 나온다.