>이벤트(Event)
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미
- 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행
- 자바스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고 함
>이벤트 타입(=이벤트명)
- 발생한 이벤트의 종류
- 가장 많이 사용하는 키보드,마우스,HTML DOM,window객체 등을 처리하는 이벤트가 많이 제공
(onclick,onkeyup, onload, ...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트타입</title>
<script>
window.onload = function(){
const text = document.getElementById("text");
text.innerHTML = "<b style ='color: deeppink';>HTML 문서가 모두 로드되었습니다.</b>"
}
const changeText = function(tag){
tag.innerHTML = "<b style='color:deepskyblue;'>변경된 문자열</b>";
}
</script>
</head>
<body>
<h2>이벤트타입</h2>
<p id="text"></p>
<p onclick="changeText(this)">문자열을 클릭하세요</p>
</body>
</html>>이벤트 타겟
- 이벤트가 일어날 객체
>이벤트 리스너(=이벤트 핸들러)
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
- 이벤트를 추가할때 add.EventListener(이벤트명,이벤트리스너)를 사용하면 된다.
- 지정된 타입의 이벤트가 특정 요소에 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행
<input type="button" onclick="sendit()" id="btn"> <--이벤트 타겟
------ -----------
이벤트명 이벤트리스너
ex) const btn = document.getElementById("btn");
btn.addEventListener("click",sendit);
** 버튼(타겟)을 클릭(타입)했을때 이거(리스너)해~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트리스너</title>
<script>
//1.이벤트 추가할때
window.onload = function(){
const btn = document.getElementById("event");
btn.addEventListener('click',clickBtn);
btn.addEventListener('mouseover',mouseoverBtn);
btn.addEventListener('mouseout',mouseoutBtn);
}
const clickBtn = function(){
document.getElementById("text").innerHTML="<b>버튼을 클릭했어요.</b>"
}
const mouseoverBtn = function(){
document.getElementById("text").innerHTML = "<b>버튼 위에 마우스가 올라갔어요</b>"
}
const mouseoutBtn = function(){
document.getElementById("text").innerHTML = "<b>버튼 위에 마우스가 나갔어요</b>"
}
//2.이벤트 제거할떄
const delEvent = function(){
const btn = document.getElementById("event");
btn.removeEventListener('click',clickBtn);
btn.removeEventListener('mouseover',mouseoverBtn);
btn.removeEventListener('mouseout',mouseoutBtn);
document.getElementById("text").innerHTML="<b>이벤트 리스너가 삭제되었어요</b>"
}
</script>
</head>
<body>
<h2>이벤트리스너</h2>
<p><button id="event">이벤트 버튼</button></p>
<p><button id="del" onclick="delEvent()">이벤트 삭제 버튼</button></p>
<p id="text"></p>
</body>
</html>>이벤트 객체
- 특정 타입의 이벤트와 관련이 있는 객체
- 발생한 이벤트에 대한 상세 정보를 저장
- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type
- 이벤트의 대상을 나타내는 target 프로퍼티를 가짐
- 이벤트 객체는 이벤트 리스너가 호출될 때 매개변수로 전달
ex)버튼에 클릭 이벤트가 발생했을 떄
const sendit = function(e){
// e.target:클릭된 버튼
// e.type :'click'
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 객체-1</title>
</head>
<body>
<h2>이벤트 객체-1</h2>
<input type="button" value="확인" id="btn">
<script>
const btn = document.getElementById("btn");
btn.addEventListener('click',clickBtn);
function clickBtn(e){
console.log('이벤트타겟',e.target);
// <input type="button" value="확인" id="btn">
console.log('이벤트 타겟의 id:',e.target.id); //btn
console.log('이벤트 타겟의 value:',e.target.value); //확인
console.log(e.type); //click
}
</script>
</body>
</html>
ex) 예제: 하나의 리스너로 여러버튼 다중 처리하기.
<문제-버튼1_2_3 순서대로 누를때마다 n번째 버튼이 눌렸어요 뜨게 하기 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 객체 - 2</title>
</head>
<body>
<h2>이벤트 객체 - 2</h2>
<!-- 버튼 세개 -->
<p id="pTag"></p>
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
</body>
<script>
// 하나의 리스너로 여러 버튼 다중처리
//콘솔에 첫번째 버튼 클릭! ~ 세번째 버튼 클릭!
const pTag = document.getElementById("pTag");
const clickBtn = function(e){
switch(e.target.id){
case "btn1":
pTag.innerHTML="첫번쨰 버튼이 눌렸어요."
break;
case "btn2":
pTag.innerHTML="두번쨰 버튼이 눌렸어요."
break;
case "btn3":
pTag.innerHTML="세번쨰 버튼이 눌렸어요."
break;
}
}
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',clickBtn);
const btn2 = document.getElementById('btn2');
btn2.addEventListener('click',clickBtn);
const btn3 = document.getElementById('btn3');
btn3.addEventListener('click',clickBtn);
</script>
</html>
>이벤트 전파
- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 요소를 결정하는 과정
- 이벤트의 대상이 window객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않음.
(부모자식관계만 전파가 일어난다라고 이해해도 좋다)
- document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상요소를 결정하기 위해 이벤트 전파가 일어남(전파되면서 리스너들을 호출)
# 이벤트 전파 방식은 버블링, 캡쳐형 방식으로 나뉨
1) 버블링: 타겟 -> 부모 방향으로 전파 * 더 많이 씀 (전파 컨트롤하기 더 쉬움)
.addEventListener(이벤트명,이벤트리스너)
2) 캡쳐링: 부모 -> 타켓 방향으로 전파
.addEventListener(이벤트명,이벤트리스너,true)
*.stopPropagation(); //이벤트 전파를 멈춤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 전파</title>
</head>
<body>
<h2>이벤트 전파</h2>
<div id="divBox">
<p id="pBox">박스 안의 여러 곳을 <span id="spanBox">클릭</span>하세요</p>
</div>
<p id="text"></p>
</body>
<script>
const clickDiv = function(e){
document.getElementById("text").innerHTML += 'div 요소를 클릭했어요<br>'
}
const clickP = function(e){
document.getElementById("text").innerHTML += 'p 요소를 클릭했어요<br>'
}
const clickSpan = function(e){
e.stopPropagation(); //이벤트 전파를 멈춤
document.getElementById("text").innerHTML += 'span 요소를 클릭했어요<br>'
}
//버블링 전파방식(타겟 -> 조상)
document.getElementById('divBox').addEventListener('click',clickDiv);
document.getElementById('pBox').addEventListener('click',clickP);
document.getElementById('spanBox').addEventListener('click',clickSpan);
</script>
</html>
#divBox{
width:100%;
height:300px;
border:3px solid red;
}
#pBox{
width:70%;
height:150px;
border:3px solid blue;
}
#spanBox{
border:3px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트전파</title>
</head>
<body>
<h2>이벤트 전파</h2>
<div id="divBox">
<p id="pBox">박스 안의 여러 곳을 <span id="spanBox">클릭</span>하세요</p>
</div>
<p id="text"></p>
</body>
<script>
const clickDiv = function (e){
document.getElementById("text").innerHTML +='div 요소를 클릭했어요<br>'
}
const clickP = function (e){
document.getElementById("text").innerHTML +='p 요소를 클릭했어요<br>'
}
const clickSpan = function (e){
e.stopPropagation(); //이벤트의 전파를 멈춤ㅇ
document.getElementById("text").innerHTML +='span 요소를 클릭했어요<br>'
}
//캡쳐링 전파방식 (조상->타겟)
document.getElementById("divBox").addEventListener('click',clickDiv,true);
document.getElementById("pBox").addEventListener('click',clickP,true); //div ->p
document.getElementById("spanBox").addEventListener('click',clickSpan,true);
</script>
</html>
#divBox{
width:100%;
height:300px;
border:3px solid red;
}
#pBox{
width:70%;
height:150px;
border:3px solid blue;
}
#spanBox{
border:3px solid green;
}
>JQuery(제이쿼리)
- 오픈소스 기반의 자바스크립트 라이브러리
- 문서객체모델(DOM) 과 이벤트(Event)에 관한 처리를 쉽게 구현할 수 있음
- Ajax 응용 프로그램도 빠르게 개발이 가능
1. 공식 사이트
http://jquery.com
2. 다운로드
1) Download the compressed, production jQuery 3.6.0
- 다운받아서 그대로 개발에 사용할 때
2) Download the uncompressed, development jQuery 3.6.0
- 오픈소스 기반으로 수정하여 사용할 때
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 링크 우클릭
> 다른 이름으로 링크 저장 > .js 파일 저장하기
* 문제점 ->사이트 먹통시, 인터넷 연결안될시 안됨. js파일 저장해서 사용하자!
3.기본 문법
$(선택자).동작함수();
선택자 : 함수가 적용되길 원하는 요소 및 속성
동작함수 : 선택된 요소에 원하는 동작을 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>제이쿼리</h2>
<p><span>오픈소스</span>기반의 자바스크립트 라이브러리</p>
<p>여러 요소에 이벤트를 달 수 있다.</p>
</body>
<script>
//1. window.onload 와 비슷 (로딩이 다 된후 function 실행)
$(function(){
console.log("제이쿼리 시작");
});
//2. $("css선택자").css("속성명","속성값") : 선택된 대상의 css 설정
$("h2").css("color","blue");
//3. $("선택자").on("이벤트타입",이벤트리스너) :해당 이벤트가 발생시 뒤에 오는
// 리스너 호출
$("p").on("click",function(){
//$(this) :현재 'click' 이벤트가 발생된 대상(타겟)
$(this).css("color","red");
})
//4. $(선택자).attr("속성명","속성값") :선택된 대상의 속성 설정
$("p>span").attr("class","txt");
//5. $(선택자).text() : 선택된 대상이 갖고있는 문자열(텍스트) 자체
// $(선택자).text("문자열"): 선택된 대상이 갖고있는 문자열을 남겨주는 문자열로 교체
$("p+p").text("한번에 여러 요소에 이벤트 리스너를 달 수 있다.")
//제이쿼리에서 innerHTML .style.color 못씀 제이쿼리에 존재하는것을 사용해야함.
// <바닐라>
// let pArr = document.getElementsByTagName("p");
// for(let pTag of pArr){
// pTag.addEventListener('click',function(){
// pTag.style.color ="red";
// })
// }
// 바닐라로 이벤트를 넣으려면 tag를 하라하라 찾아서 for문을 돌려줘야하는 복잡함이 있다.그래서 이떄는 제이쿼리를 쓰면 매우 편하다.
</script>
</html>
'프로그래밍 > Javascript' 카테고리의 다른 글
| Javascript 4일차 -노드생성_복제_제거, 폼객체 (0) | 2022.01.13 |
|---|---|
| Javascript 3일차 -window객체,Date객체,DOM, 노드 (0) | 2022.01.12 |
| Javascript 2일차 - 함수,객체 (0) | 2022.01.12 |
| Javascript 1일차 - 탄생배경, 문법 (0) | 2022.01.10 |