JavaScript(6)

zooyeong·2023년 3월 20일

JavaScript

7주차

목록 보기

7/7

💡이벤트 다루기

📖이벤트 종류

마우스 이벤트

onclick : 마우스로 클릭하면 발생
ondblclick : 마우스로 더블 클릭하면 발생
onmouseover : 마우스 포인터를 올리면 발생
onmouseout : 마우스 포인터가 빠져나가면 발생
onmousemove : 마우스 포인터가 움직이면 발생
onwheel : 마우스 휠(wheel)을 움직이면 발생

키보드 이벤트

onkeypress : 키보드 버튼을 누르고 있는 동안 발생
onkeydown : 키보드 버튼을 누른 순간 발생
onkeyup : 키보드 버튼을 눌렀다가 뗀 순간 발생

포커스 이벤트

onfocus : 요소에 포커스가 되면 발생
onblur : 요소가 포커스를 잃으면 발생

폼 이벤트

onsubmit : 폼이 전송될 때 발생

리소스 이벤트

onload : 웹 브라우저의 리소스 로드가 끝나면 발생

📖이벤트 등록

이벤트가 발생할 때 마다 어떤 작업을 할지 자바스크립트 코드로 작성하는 것이다.

인라인 : HTML 태그에 속성으로 이벤트 등록
프로퍼티 리스너 : 요소 노드에 직접 속성으로 이벤트 등록
이벤트 등록 메서드 : addEventListener() 메서드로 이벤트 등록

✅마우스 이벤트

클릭

<input type="text" id="inp">
<button id="btn" onclick="func_alert()">버튼</button>
<script>
  function func_alert(){
    alert('버튼 눌림');
  }
</script>

↓클릭

더블클릭

<input type="text" id="inp">
<button id="btn" ondblclick="func_alert_dbl()">버튼</button>
<script>
  function func_alert_dbl(){
    alert('버튼 눌림 더블클릭');
  }
</script>

↓더블클릭

✅포커스 이벤트

onfocus : 인라인방식

<input type="text" id="inp" onfocus="inputfocus()">
<button id="btn">버튼</button>
<script>
  function inputfocus(){
    console.log('input 포커싱됨')
 }
</script>

onfocus : 정의된 함수를 저장하는 방법

<input type="text" id="inp">
<button id="btn">버튼</button>
<script>
  const inpEl = document.getElementById('inp');
  inpEl.onfocus = inputfocus; //*inputfocus(); X
  function inputfocus(){
    console.log('input 포커싱됨')
 }
</script>

↓onfocus

*inputfocus(); X
-> 괄호를 넣어 써주게 되면 onfocus이벤트와 관계없이 함수가 실행된다. JS 파일을 읽어 내려가는 순간 inputfocus();가 실행되기 때문이다. 따라서 함수 실행을 미루고 해당 이벤트 시 함수가 실행되려면 괄호를 생략하여 작성하면 된다.
🔥함수(); -> 함수;

✅이벤트 등록 메서드 addEventListener()

addEventListener(어떤이벤트인지, 실행할 함수);

함수 지정

<input type=<"text" id="inp">
<button id="btn" onclick="func_alert()" ondblclick="func_alert_dbl()">버튼</button>
<script>
  const inpEl = document.getElementById('inp');
  function inputfocus(){
    console.log('input addEventListener 포커싱됨');
  }
  inpEl.addEventListener('focus', inputfocus);
</script>

익명함수로 바로 저장

<script>
  inpEl.addEventListener('focus', function(){
    console.log('addEventListener 안에서 function 바로 선언');
  });
</script>

화살표함수로 바로 저장

<script>
inpEl.addEventListener('focus', ()=>{
    console.log('addEventListener 안에서 function 바로 선언');
    });
</script>

↓addEventListener()

📖이벤트 객체 사용

✅이벤트 객체
이벤트 객체란 이벤트 함수가 호출될 때 내부적으로 전달되는 이벤트 정보가 담긴 객체이다.

✅pointerEvent 객체의 주요 속성

clientX	마우스가 클릭된 x좌표 수평 스크롤 포함 X
clientY	마우스가 클릭된 y좌표 수직 스크롤 포함 X
pageX	마우스가 클릭된 x좌표 수평 스크롤 포함 O
pageY	마우스가 클릭된 y좌표 수직 스크롤 포함 O
screenX	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표
screenY	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표

<body> 
  <div class="box" style="width:300px; height:300px; border:1px solid red;"></div>
  <script>
	  document.querySelector('.box').addEventListener('click', function(e){
    												//*e:매개변수가 있는 것처럼 쓰겠다!
        console.log('clientX ' + e.clientX);
        console.log('clientY ' + e.clientY);
        console.log('pageX ' + e.pageX);
        console.log('pageY ' + e.pageY);
        console.log('screenX ' + e.screenX);
        console.log('screenY ' + e.screenY);
      })
  </script>
</body>

*e: 매개변수가 있는 것처럼 쓰겠다!
-> 이렇게 등록을 해두면 이벤트가 발생할 때마다 브라우저에서 실행시켜준다. 어떤 마우스좌표(or 키보드)가 눌렸는지와 같은 이벤트에 관한 정보도 같이 전달해준다.

✅KeyboardEvent 객체의 주요 속성

keyCode	키보드에서 눌린 키의 유니코드 값 반환
ctrlKey	Ctrl 키가 눌렸으면 true, 그렇지 않으면 false 반환
altKey	Alt 키가 눌렸으면 true, 그렇지 않으면 false 반환
shiftKey	Shift 키가 눌렸으면 true, 그렇지 않으면 false 반환

<body>
  <input type="text">

  <script>
    const inp = document.querySelector('input');                        
    inp.addEventListener('keydown', function(e){
      console.log(e.keyCode);
      console.log(e.ctrlKey);
      console.log(e.altKey);
      console.log(e.shiftKey);
    });
  </script>
</body>

↓Ctrl 입력 시

-> 키코드는 17을 반환, ctrlKey 속성에 true를 반환

↓Alt 입력 시

-> 키코드는 18을 반환, altKey 속성에 true를 반환

↓Shift 입력 시

-> 키코드는 16을 반환, shiftKey 속성에 true를 반환

📖이벤트 취소

preventDefault() : 태그에 적용된 기본 이벤트를 취소

📖this 키워드 사용

this 키워드 : 이벤트를 발생시킨 요소 노드를 가리킴
화살표 함수일 때는 이벤트 객체의 target 속성으로 참조

CSS

.box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      margin: 10px 0px;
    }

HTML

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>

const boxes = document.querySelectorAll('.box');
for(let box of boxes){
  box.addEventListener('click', function(){
    console.log(this);
    this.style.backgroundColor = 'red';
  });
}

🔽실행 결과

-> this를 사용하니 각 박스별로 아이디를 사용하지 않아도 스타일을 적용할 수 있다.

🔥추가) 화살표 함수 사용 시!

const boxes = document.querySelectorAll('.box');

for(let box of boxes){
  box.addEventListener('click', (this)=>{
    console.log(this);
    this.style.backgroundColor = 'red';
  });
}

-> 에러 발생!
why? 화살표 함수에는 this가 없다! function으로 선언한 함수는 this가 존재하지만 값을 지정하진 않는데, 화살표 함수로 선언한 함수에는 this가 없다. this 자체가 존재하지 않다보니 상위 환경의 this를 참조하게 된다.
위의 경우에는 this가 Window에 걸려 에러가 발생했다. 이 때는 화살표 함수 괄호 안에 이벤트에 해당하는 매개변수를 넣어주고, 이벤트 객체의 target 속성으로 접근한다.

const boxes = document.querySelectorAll('.box');

for(let box of boxes){
  box.addEventListener('click', (e)=>{
    console.log(e.target);
    e.target.style.backgroundColor = 'red';
  });
}

🔽실행 결과

🔥연습문제

주어진 기본 요소들.

<input type="text" id="loginId" placeholder="아이디"><br>
<input type="password" id="loginPw" placeholder="비밀번호"><br>
<button id="btnLogin" onclick="tryLogin()">로그인 시도</button><br>

*로그인 버튼을 누르면.
아이디와 비밀번호에 있는 입력된 텍스트를 없애기

*아이디 입력칸에서 키보드 입력 시,
무슨 키가 눌렸는지 확인 해보고 엔터가 눌리면 비밀번호 입력 칸으로 이동

*비밀번호 입력칸에서 키보드 입력 시,
엔터가 눌리면 로그인 버튼을 누른것과 동일한 기능을 수행

const elId = document.querySelector('#loginId');
const elPw = document.querySelector('#loginPw');
const btn = document.querySelector('button');
elId.addEventListener('keydown', function(e){
  if(e.keyCode == 13){
    elPw.focus();
    console.log('아이디 입력');
  }
});
elPw.addEventListener('keydown', function(e){
  if(e.keyCode == 13){
    console.log('비밀번호 입력');
    tryLogin();
  }
});
function tryLogin(){
  elId.value = '';
  elPw.value = '';
  console.log('로그인 시도 누름');
}

🔽실행 결과(enter 누름)

zooyeong

Have a good day ⌯’▾’⌯

이전 포스트