이벤트(event)
- 브라우저는 클릭, 마우스 이동(hober), 키보드 입력 등이 일어나면 이를 감지하여 특정한 타입의 이벤트를 발생시킵니다.
- 만약 애플리케이션이 특정 이벤트에 반응하고 싶다면 이벤트에 대응하는 함수를 브라우저에게 알려주어 호출을 위임할 수 있습니다.
- 이 때 호출될 함수를 이벤트 핸들러라고 부르며 이를 위임(== 대응하여 하나의 쌍으로 만듦)하는 것을 이벤트 핸들러 등록(binding 바인딩)이라고 부릅니다.
- 이벤트는 특정한 사건과 사건을 다뤄주는 이벤트 핸들러가 있습니다.
이벤트 타입
이벤트 타입이란 브라우저가 감지하는 이벤트들의 종류입니다.
- 마우스 이벤트
- Click
- dbclick
- contextemu
- mouseover, mouseout
- 폼 요소 이벤트
- submit - 사용자가 <form>을 제출하는데 준할 때 발생함.
- change - 사용자가 <input> 요소 내에서 값을 변경했을 때, 추가 입력 또는 삭제 등 변동
- focus - 사용자가 <imput>과 같은 요소에 포커스
- 키 이벤트
- 로드 및 기타 이벤트
이벤트 핸들러
이벤트 핸들러란 특정 타입의 이벤트가 발생했을 때 실행됩니다
사용가 만든 이벤트 처리 함수를 브라우저에게 위임하는 역할을 합니다.
즉, A라는 일이 생기면 B라는 함수가 시행해주세요라고 하면 이때 A와 B를 연결하는 것이 이벤트 핸들러입니다.
이벤트 핸들러 방식 3가지
1) 어트리뷰트 방식
이벤트 핸들러를 HTML 요소에 직접 저장하는 방식입니다.
on click = "함수 호출문" 형식으로 on + 이벤트 타입으로 이루어진 속성명을 적고 속성 값으로 이벤트 핸들러 함수의 호풀문을 적습니다.
<div class="box red" onclick="witdhDouble();"></div>과거에는 많이 사용하던 방식이지만 자바스크립트와 HTML의 분리를 위해 사용하지 않는 것을 권장하고 있습니다.
적용 사례)
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: orange;
margin: 20px;
}
.box.red {
background: red;
}
.box.green {
background: yellowgreen;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- css에서 띄어쓰기로 구분자 -->
<div class="box" onclick="alert('첫 박스가 클릭됨');"></div>
<div class="box red" onclick="witdhDouble();"></div>
<div class="box green" onmouseover="onMouseWidhText();" onmouseout="onMouseOutText();"></div>
<script>
function witdhDouble(){
// Tip : 태그인 경우 $를 붙여 변수 표시를 원활하게
const $redBox = document.querySelector('.red');
$redBox.style.width = '200px';
}
// box green에 마우스가 진입했을 때
// 내부 텍스트로 안녕이 추가되게 해주세요.
// $요소명.textContent = '안녕';
const onMouseWidhText = () => {
const $greenBox = document.querySelector('.green');
$greenBox.textContent =" 안녕";
}
// onmousout을 이용해서 마우스가 box green에서 빠졌을 때
// 내부 텍스트로 '안녕'이 사라지게 해주세요.
const onMouseOutText = ()=>{
const $greenBox = document.querySelector('.green');
$greenBox.textContent ="";
}
</script>
</body>
</html>
2) 프로퍼티 방식
자바스크립트 객체가 있고 $element 관련 내용 내부에 있는 프로퍼티 중 연결하는 방식입니다.
이벤트 타켓 on + 이벤트 타입 이벤트 헨들러
$element.on핸들러 = () =>{}
$b3.onmouseover= ()=>{
$b3.style.background = 'blue'이벤트 핸들러를 요소 노드의 프로퍼티로 추가하는 방식으로 이 방식은 HTML과 자바스크립트를 분리하여 코딩할 수 있다는 장점이 있습니다. 하지만 하나의 요소에 하나의 이벤트 핸들러만 바인딩 할 수 있다는 단점이 있습니다.
적용 사례)
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>
<!-- b$*3은 EMMET로, #은ID, $는 숫자가 들어간 와일드카드 -->
<!--button#b$*3-->
<button id="b1">클릭1</button>
<button id="b2">클릭2</button>
<button id="b3">클릭3</button>
</body>
<script>
// 버튼 3개에 대해서 변수에 저장
// 버튼태그 3개를 리스트로 가져온다음 구조분해할당
const [$b1,$b2,$b3] = document.querySelectorAll("button");
// b1에 연동할 함수 선언
const sayHello=()=>{
alert("안녕하세요!!!");
}
//console.log($b1)//태그 형식이 나옴 -> html관점에서 결과
//console.dir($b1);//태그 내장 속성에 대한 객체가 나옴, 자바스크립트 속성 -> 바인딩 결과를 보고 싶을 때 사용
// b1에 onclick 이벤트로 sayHello 함수 연결
// 바인딩은 () 없이 실행하지 않고 함수만 연결.
$b1.onclick = sayHello;
// b2를 클릭했을 때 배경색이 빨간색이 되는 함수를 선언 및 연결해주세요.
// $요소명.style.background = 'red';
const backgroundRed = ()=>{
$b2.style.background = 'red';
}
$b2.onmouseover = backgroundRed;
// b3에 마우스가 올라가면 배겨이 파란색, 빠져나가면 노란색이 되게 익명함수로 직접
// #익명함수란? const 변수명 =()=>{}
// 프로퍼티에 바인딩해주세요.
$b3.onmouseover= ()=>{
$b3.style.background = 'blue'
};
$b3.onmouseout = ()=>{
$b3.style.background = 'yellow'
};
</script>
</html>
3) 콜백함수 방식
addEventListener메서드는 첫 번째 인수로 이벤트 종류를 나타내는 문자열의 이벤트 타입을 전달하는 방식입니다,
💡 $element.addEventListener(’click’,functionName);
=> 이벤트 타켓.addEventListener((on제외한)이벤트타입,이벤트 핸들러);
- 이 때 첫번째 인수에 접두사 on을 붙이지 않습니다.
- 두 번째 인수로는 이벤트 핸들러 함수를 콜백으로 전달합니다.
- 메서드가 첫 번째 인수 행동 시에 두 번째 인수를 실행해라
- 이 방법은 동일한 요소에서 동일한 이벤트에 대해 하나 이상의 이벤트 핸들러를 등록할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- button#btn #은ID .은 클래스 -->
<button id="btn">클릭해주세요</button>
<script>
// "안녕"이라는 alert을 띄워주는 핸들러 함수 정의
function hello(){
alert(('안녕'));
}
const $btn = document.getElementById('btn');
// $btn에 대한 클릭 발생 시 hello 함수 내부 실행문을 실행해라
$btn.addEventListener("click",hello);
// 익명함수로 여러분들이 버튼의 배경색을 아무거나 바꿔주세요.
// 21번라인 구문의 hello를 입력해주는 자리에 화살표함수나 익명함수를 직접 콜백형식으로 정의해주세요.
// mouseup 이벤트를 바인딩합니다.
$btn.addEventListener("mouseup", ()=>{
$btn.style.background ='blue';
});
// 익명함수는 제거가 안 되지만 기명함수는 게거 가능
// 어떤 조건 발동 시 등록한 함수를 삭제할지 적어서 삭제 가능
$btn.removeEventListener("click",hello);
</script>
</body>
</html>특정 조건을 충족시키기 전까지는 이벤트 발생하다가 특정 조건이 충족되면 더 이상 이벤트가 발생하지 않도록 할 때 사용합니다.
'FE(front-end)' 카테고리의 다른 글
| [자바스크립트] 배열 구조 분해 할당+ 스프레드 연산자 (0) | 2023.11.23 |
|---|---|
| [자바스크립트] 클로저(closure) (0) | 2023.11.20 |
