Day 34

간단한 회원가입 폼을 만드는데 라벨로 input을 감싸줬음에도 불구하고 input이 라벨의 width를 넘어 튀어나가는 현상 발생
=> 정답은 box-sizing을 border-box로 !!

 <label>아이디 <input placeholder="아이디를 입력해주세요" class="wideInput" type="text" /></label>

border-box 이전

border-box 이후

++ 전체 요소에 border-box 설정해준 이후로 textarea 요소가 폼의 width만큼 늘어나지 않는 현상도 해결됐다

before

after

textContent, innerText, innerHtml의 차이

• innerText : 스타일링도 고려해서, 사용자에게 보여지는 텍스트 값만을 불러온다
• innerHtml : 말 그대로 html을 반환. html, xml 모두를 의미. html을 분석해야한다는 점에서 textContent보다 성능이 떨어지고, XSS(Cross-site scripting)의 위험이 있다
• textContent : script, style 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다

ex.

// html
<p id="testTxt">좋은 아침입니다 <span style="display: none;">피곤해요</span></p>

// Js
const testTxt = document.getElementById('testTxt');
console.log('innerHtml : ', testTxt.innerHTML);
console.log('innerText : ', testTxt.innerText);
console.log('textContent: ', testTxt.textContent);

결과

innerHtml : 좋은 아침입니다 <span style="display: none;">피곤해요</span>
innerText : 좋은 아침입니다
textContent : 좋은 아침입니다 피곤해요

이벤트 종류

1. 마우스 이벤트

이벤트 이름	설명
onclick	클릭
ondbclick	더블클릭
onmouseover	마우스 포인터를 올리면
onmouseout	포인터가 빠져 나가면
onmousemove	포인터가 움직이면
onwheel	마우스 휠 움직이면

2. 키보드 이벤트

이벤트 이름	설명
onkeypress	키보드 버튼 누르는 동안
onkeydown	키보드 버튼을 누른 순간
onkeyup	키보드 버튼 눌렀다가 뗀 순간

3. 포커스 이벤트

이벤트 이름	설명
onfocus	요소가 포커스가 되면
onblur	요소가 포커스를 잃으면

4. 리소스 이벤트

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

이벤트의 등록

1. 인라인 : Html 태그에 속성으로 이벤트 등록

// Js
function clickBtn() {
	console.log('클릭!!');
}

// Html
<button onclick="clickBtn()">클릭!</button>

2. 프로퍼티 리스너 : 요소 노드에 직접 속성으로 이벤트 등록

// Js
const inpEl = document.getElementById('inp');
inpEl.onfocus = inputFocus;

function inputFocus() {
	console.log('포커스됐지롱!!');
}

// Html
<input type="text" id="inp" />

3. 이벤트 등록 메서드 : addEventListener() 메서드로 이벤트 등록 ( 참고 : 이벤트 종류 )

// 미리 선언 후 연결
inpEl.addEventListener('focus', inputFocus);

// 바로 선언 (익명, 화살표)
inpEl.addEventListener('focus', function () {
		console.log('안에서 바로 선언!');
})

inpEl.addEventListener('focus', () => {
		console.log('안에서 바로 선언!2');
})

이벤트 객체

: 이벤트 함수가 호출될 때 내부적으로 전달되는 이벤트 정보가 담긴 객체
: 파라미터에 이름 붙여서 접근 가능

1. 마우스 이벤트

이벤트 객체 속성	설명
clientX	마우스가 클릭된 x좌표 (수평스크롤 포함X)
clientY	마우스가 클릭된 y좌표 (수직스크롤 포함X)
pageX	마우스가 클릭된 x좌표 (수평스크롤 포함O)
pageY	마우스가 클릭된 y좌표 (수평스크롤 포함O)
screenX	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표
screenY	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표

const box = document.querySelector('.box');

// addEventListener 이벤트 마우스 이벤트정보
box.addEventListener('click', function (event) {
		console.log(event.clientX, event.clientY);
		console.log(event.pageX, event.pageY);
		console.log(event.screenX, event.screenY);
})

결과

2. 키보드 이벤트

이벤트 객체 속성	설명
keyCode	키보드에서 눌린 키의 유니코드 값 반환
ctrlKey	ctrl키 눌리면 true, 아니면 false 반환
altKey	alt키 눌리면 true, 아니면 false 반환
shiftKey	shift키 눌리면 true, 아니면 false 반환

// Js
const inp = document.querySelector('input');
inp.addEventListener('keydown', (e) => {
		console.log(e.keyCode);
})