## 이벤트(event)
-이벤트란 사용중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건을 의미한다.
-앞으로 배울 웹에서도 이벤트는 발생한다.
-웹에서 발생하는 이벤트의 예
# 웹페이지 사용자가 버튼을 클릭한 경우 (클릭 이벤트)
# 웹페이지 사용자가 키보드로 입력 경우 (키다운 이벤트)
# 웹페이지 사용자가 입력 form의 내용을 전송한 경우 (제출 이벤트)
# 외 다수의 이벤트가 발생할 수 있다.
-각각의 이벤트들은 이벤트 핸들러(event handler)를 가질 수 있다.
-이벤트 핸들러는 이벤트가 발생하면 실행될 코드 블록을 의미한다.
주로 함수가 이 역할을 담당한다.
-이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다.
example)
const button = document.querySelector("#button"); // id가 button인 요소를 button에 대입
const handlClick = function() { // 함수 생성
window.alert("회원가입을 축하합니다."); // 함수 호출시 alert)을 사용하여 경고 다이얼로그를 띄운다.
}
-호출할 때 소괄호는 생략시킨다.
button.onclick = handlClick; // button.onclick : button을 클릭시 handlClick() 함수를 호출
# 구문 기본 형태
-이벤트가 발생할 수 있는(혹은 발생 예정인) 타겟을 선택하고, 이벤트 핸들러 속성에 이벤트 핸들러를 대입한다.
-이벤트 핸들러를 대입시에는 소괄호는 사용하지 않는다.
-소괄호는 함수 호출시에 사용된다.
example) 타겟.on이벤트명 = 이벤트핸들러함수;
example) button.onclick = handlClick;
<body>
<button id="button1" value="클릭1">클릭1</button>
<button id="button2" value="클릭2">클릭2</button>
<script src="/javaScript/javaScriptEx2.js"></script>
</body>
const handlebtn1Click = function(){
window.alert("회원가입을 축하합니다.");
}
const handlebtn2Click = function(){
window.alert("회원 탈퇴가 완료되었습니다.")
}
const handleTyping = function(){
console.log("현재 키보드를 사용하여 입력중입니다.");
}
const handlePush = function(){
console.log("현재 입력버튼을 누르고 있습니다.");
}
const button1 = document.querySelector("#button1");
const button2 = document.querySelector("#button2");
const inputTyping = document.querySelector("#typing");
const inputPush = document.querySelector("#click");
button1.onclick = handlebtn1Click;
button2.onclick = handlebtn2Click;
inputTyping.onkeydown = handleTyping;
inputPush.onclick = handlePush;
## addEventListener()
-onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다
최근에 사용하는 방식은 addEventListener() 메소드를 사용하는 것이다.
-자바스크립트의 addEventListener() 메소드 사용하면 버튼을 클릭하여 이벤트가 발생할 때
호출할 함수를 지정할 수 있다.
-클릭 이벤트 핸들러를 등록하는 경우의 예
// 이전 방식
target.onclick = function() {};
// addEventListener() 메소드 방식
target.addEventListener('click', function() {});
-위의 두가지 방식의 결과는 동일하다.
-addEventListener() 메소드를 사용하는 것은 이벤트 핸들러 속성을 사용하는 것에 비해 몇 가지 장점이 있다.
# 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 매소드가 존재한다.
# 같은 리스터(타겟)에 대해 다수의 핸들러를 등록 할 수 있다.
# 추가적인 옵션 사항들이 제공된다.
// 먼저, HTML에 있는 버튼과 각각의 변수명인 btn과 연결시켜준다.
const btn1 = document.getElementById("button1");
const btn2 = document.getElementById("button2");
const btn3 = document.getElementById("button3");
// addEventListener 함수에 입력해줄 버튼을 눌렀을 때 동작할 함수를 만든다.
const bandleClick = function(){
console.log("버튼을 클릭했습니다.");
alert("로그인이 필요한 서비스 입니다.");
};
const bandleLogin = function(){
console.log("btn를 클릭했습니다.");
let id = prompt("아이디를 입력하세요");
let pw = prompt("비밀번호를 입력하세요");
console.log(`입력한 아이디는 ${id}이며, 입력한 비밀번호는 ${pw} 입니다.`)
};
const bandleOther = function(){
console.log("또 다른 핸들러를 등록합니다.");
}
btn1.addEventListener('click', bandleClick);
btn2.addEventListener('click', bandleLogin);
// 기존 onclick과의 차이는 아래처럼 여러개의 실행 코드를 등록할 수 있다.
btn3.addEventListener('click', bandleClick);
btn3.addEventListener('click', bandleLogin);
btn3.addEventListener('click', bandleOther);
// 이렇게 등록했던 코드를 remove 코드를 통해 제거도 가능하다.
btn3.removeEventListener('click', bandleClick)
## 이벤트 객체
-이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 객체이다.
이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여
이벤트 발생 시마다 전달받을 수 있도록 해야 한다.
-클릭을 누를 시에, 자동으로 이벤트라는 객체가 생성이 된다.
-사용자가 무슨 버튼을 눌렀는지, 데이터가 확인 가능하다. (장바구니를 눌렀을 때 데이터를 받고 장바구니 화면으로 넘겨주는 상황 등등)
// click 이벤트가 발생하면 함수를 호출하겠다.
target.addEventListener('click', function() {});
// click 이벤트가 발생하면 함수를 호출하겠다.
// 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다.
target.addEventListener('click', function(event) {});
const btn1 = document.getElementById("button1");
const bandleClick = function(event){
console.log("버튼을 클릭했습니다.");
alert("로그인이 필요한 서비스 입니다.");
console.log(event.target);
};
btn1.addEventListener('click', bandleClick);
'javaScript↗' 카테고리의 다른 글
| JavaScript 정리 (0) | 2024.06.10 |
|---|---|
| [ jS] HTML 태그 추가 / 클래스 관리 (1) | 2024.04.12 |
| javaScript 함수(function) (0) | 2024.04.11 |
| javaScript 조건문(if-else), 반복문(for,while) (0) | 2024.04.11 |
| javaScript DOM(parameter, agument) (0) | 2024.04.11 |