[JavaScript/Web] 이벤트 객체

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

이벤트 객체

기초적인 event를 알고, event handler를 element에 적용할 수 있다.
onclick 에 직접 할당하는 것과 addEventListener의 차이를 이해한다.
eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
</head>
<body>
<div>
  <button type="button" >1번버튼</button>
  <button type="button" >2번버튼</button>
</div>
<script src="test.js"></script>
</body>
</html>

다음 코드를 실행하면 두개의 버튼이 화면에 출력됩니다.

let btn = document.querySelectorAll("button");

let btnNum1 = btn[0];
let btnNum2 = btn[1];

btnNum1.onclick = handleClick;
btnNum2.onclick = handleClick;

function handleClick() {
console.log(event.target.textContent)
}

다음과 같은 js문을 만들어 클리개된 버튼의 텍스트를 콘솔에 보여주려 한다.

querySelectorAll("button")으로 모든 버튼을 가져와 배열의 형식으로 저장합니다.
이들중 0번째 인덱스 값을 btnNum1, 2번 인덱스 값을 btnNum2에 저장합니다
각각의 변수들은 onclick시 handlerCLick함수가 실행됩니다.

이 함수는 event.target.textContent를 콘솔화면에 보여 줍니다.

event.target.textContent중 textContent는 텍스트 요소를 출력한자 하지만 앞에 event와 target은 무엇인지 모르겠다.
event를 콘솔화면에 출력하면 다음과 같다.

이중 target은 다음을 갖는다.

이중 innerHtml과 textContent는 버튼의 텍스트 값을 갖는다.

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[Javascript] 고차 함수의 중요성과 추상화 (0)	2022.09.20
[Javascript] 고차 함수와 내장 고차 함수 (1)	2022.09.20
[Git] github 사용 (0)	2022.09.15
[javaScript/Web] 유효성 검사를 하는 회원가입 페이지 (0)	2022.09.14
[JavaScript/Web] Dom에 대한 추가 공부 (0)	2022.09.13

이벤트 객체

'프론트엔드 > Codestates' 카테고리의 다른 글

티스토리툴바