Powered by

# 2. EVENT

In 

# 목차

  • 1. 개요
    • 1.1. 예제1
    • 1.2. 예제2

# 1. 개요

웹 브라우저에서 버튼을 클릭한다거나 mouse를 움직이거나 하는 모든 행위를 ‘이벤트’라고 합니다. 그리고 이벤트발생 시 함수의 실행문이 수행되도록 이벤트를 지정하는 것을 이벤트 핸들러라고 합니다. 이벤트 발생시 관련 정보를 가지고 있는 이벤트 객체를 전달받을수 있습니다.

# 1.1. 예제1

미리보기
../1/2.html 

<!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>
		<h1>Events</h1>
		<input class="form-control" type="number" style="padding: 30px; font-size: 30px; color: blue; border: 1px solid blue" />
		<br />
		<button style="background-color: blue; color: #fff; font-size: 20px">100 더하기</button>
		<h1>The total is: <span>N/A</span></h1>
		<h1>버튼</h1>
		<div class="container">
			<p>후라이드 좋아한다고 말해야 했지 어떤 날엔 화내야 했지 (오빠가 돈이 어디 있다고 양념을 사줘) 우린 데이트하면 후라이드 우리가 매일 먹고 또 먹던 후라이드 근데 오빠 나도 속물 인가봐 양념이라면 눈이 돌아갔지 양념이 오빠의 피 같아 지금은 후라이드 밖에 못 삼켜</p>
			<button id="submit">치킨시켜</button>
		</div>
	</body>
</html>

# [js] step1 

var num = 100;

function calculate() {
	var input = document.querySelector('.form-control');
	var value = Number(input.value);
	var totalValue = value + num;

	var h1 = document.querySelectorAll('h1')[1];
	var span = h1.querySelector('span');

	span.innerText = totalValue;
}

var submitBtn = document.getElementById('submit'),
	container = document.querySelector('.container');

submitBtn.addEventListener('click', function (event) {
	alert('원 플러스 원 곱빼기도 되요?!');
});

container.addEventListener('mouseenter', mouseEnterContainer);
container.addEventListener('mouseleave', mouseLeaveContainer);

function mouseEnterContainer() {
	container.style.background = '#fff';
	console.log('옆 테이블 남는 거 싸가도 되요?');
}
function mouseLeaveContainer() {
	container.style.background = 'pink';
}

document.addEventListener('keyup', function () {
	console.log(event.keyCode);
});

# [jq] step2

미리보기
../1/2q.html 

var num = 100;

function calculate() {
	var input = $('.form-control');
	var value = Number(input.val());
	var totalValue = value + num;

	var h1 = $('h1').eq(1);
	var span = h1.find('span');

	span.text(totalValue);
}

var submitBtn = $('#submit'),
	container = $('.container');

submitBtn.click(function (event) {
	alert('원 플러스 원 곱빼기도 되요?!');
});

container.on({ mouseenter: mouseEnterContainer, mouseleave: mouseLeaveContainer });

function mouseEnterContainer() {
	container.css('background', '#fff');
	console.log('옆 테이블 남는 거 싸가도 되요?');
}
function mouseLeaveContainer() {
	container.css('background', 'pink');
}

$('body').keyup(function () {
	console.log(event.keyCode);
});

# 1.2. 예제2

# html 

<!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>
		<div id="wrap">
			<h1>이벤트 연습</h1>
			<p id="textZone">웹 브라우저에서 버튼을 클릭한다거나 mouse를 움직이거나 하는 모든 행위를 ‘이벤트’라고 합니다. 그리고 이벤트발생 시 함수의 실행문이 수행되도록 이벤트를 지정하는 것을 이벤트 핸들러라고 합니다.</p>
			<h2>click 메서드</h2>
			<p><button id="btn1">click</button></p>
			<h2>mouseover 메서드</h2>
			<p><button id="btn2" tabindex="1">mouseover</button></p>
			<h2>bind 메서드</h2>
			<p><button id="btn3">bind</button></p>
			<h2>mouseleave 메서드</h2>
			<div id="listWrap">
				<h3>관련 사이트</h3>
				<ul class="list1">
					<li><a href="#">list1</a></li>
					<li><a href="#">list2</a></li>
					<li><a href="#">list3</a></li>
					<li><a href="#">list3</a></li>
				</ul>
			</div>
			<h2>hover 메서드</h2>
			<h3><a href="#" class="hover">hover</a></h3>
		</div>
	</body>
</html>

# css 

* {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}
body {
	font: 12px/1.5 '굴림', Gulim;
	margin: 10px;
}
h2 {
	margin-top: 30px;
}
a {
	color: #333;
}
#textZone {
	width: 700px;
}
#listWrap {
	background: #cfcfcf;
	width: 110px;
	padding: 10px;
}
.list1 {
	display: none;
}

미리보기
../1/3s.html

  • 상수초기화
const textZone = document.querySelector('#textZone');
  1. id="btn1" 클릭 했을때 id="textZone" 글자 색상을 파란색으로 변경
btn1.onclick = function () {
	textZone.style.color = 'blue';
};
  1. id="btn2"에 마우스 오버 했을때 id="textZone" 배경 색상을 노란색으로 변경
const btn2 = document.querySelector('#btn2');
btn2.onmouseover = function () {
	textZone.style.backgroundColor = 'yellow';
};
  1. id="btn2"에 포커스가 생겼을때 id="textZone" 배경 색상을 노란색으로 변경
btn2.onfocus = function () {
	textZone.style.backgroundColor = 'yellow';
};
  1. 두개이상의 이벤트(mouseover,click,focus)를 등록시킬때
const btn3 = document.querySelector('#btn3');
function textZone4() {
	textZone.style.color = 'green';
	textZone.style.fontWeight = 'bold';
}
btn3.addEventListener('mouseover', textZone4);
btn3.addEventListener('focus', textZone4);
btn3.addEventListener('click', function () {
	alert();
});
btn3.addEventListener('click', function () {
	textZone.style.marginLeft = '80px';
});
  • property listener 로 이벤트 등록시 같은 이벤트 덮어씌워짐
btn3.onmouseover = textZone4;
btn3.onfocus = textZone4;
btn3.onclick = function () {
	alert();
};
btn3.onclick = function () {
	textZone.style.marginLeft = '80px';
};
  1. id="listWrap"에 마우스가 올라가 있으면 class="list1" 을 블록요소 변경합니다. mouseover와 비슷
const listWrap = document.querySelector('#listWrap');
const list1 = document.querySelector('.list1');
listWrap.onmouseenter = function () {
	list1.style.display = 'block';
};
  1. id="listWrap"에서 마우스가 벗어나면 class="list1" 을 블록요소 변경합니다. mouseout과 비슷
listWrap.onmouseleave = function () {
	list1.style.display = 'none';
};
  1. class="hover"인 요소에 마우스를 올렸을땐 함수1을 벗어났을때에는 함수2를 실행 합니다.
let hover = document.querySelector('.hover');
hover.addEventListener('mouseover', function () {
	this.style.color = 'aqua'; //함수1
});
hover.addEventListener('mouseout', function () {
	this.style.color = 'red'; //함수2
});

미리보기
../1/3q.html

  1. jquery 라이브러리 로드 <script src='https://code.jquery.com/jquery-3.7.1.slim.min.js'></script>

  2. id="btn1" 클릭 했을때 id="textZone" 글자 색상을 파란색으로 변경

const btn1 = $('#btn1');
btn1.on('click', () => {
	textZone.css('color', 'blue');
});
  1. id="btn2"에 마우스 오버 했을때 id="textZone" 배경 색상을 노란색으로 변경
const btn2 = $('#btn2');
btn2.on('mouseover', function () {
	textZone.css('backgroundColor', 'yellow');
});
  1. id="btn2"에 포커스가 생겼을때 id="textZone" 배경 색상을 노란색으로 변경
btn2.on('focus', function () {
	textZone.css('backgroundColor', 'yellow');
});
  1. 두개이상의 이벤트(mouseover,click,focus)를 등록시킬때
const btn3 = $('#btn3');
btn3.on({
	'mouseover focus': function () {
		textZone4();
	},
	click: function () {
		alert();
		textZone.css('margin-left', '80px');
	},
});
function textZone4() {
	textZone.css('color', 'green');
	textZone.css('fontWeight', 'bold');
}
  1. id="listWrap"에 마우스가 올라가 있으면 class="list1" 을 블록요소 변경합니다. mouseover와 비슷
$('.hover').hover(
	function () {
		$(this).css('color', 'aqua');
	},
	function () {
		$(this).css('color', 'red');
	}
);
  1. id="listWrap"에서 마우스가 벗어나면 class="list1" 을 블록요소 변경합니다. mouseout과 비슷
  2. class="hover"인 요소에 마우스를 올렸을땐 함수1을 벗어났을때에는 함수2를 실행 합니다
$('.hover').on({
	mouseenter: function () {
		$(this).css('color','aqua');
	},
	mouseleave: function () {
		$(this).css('color','red');
	},
});
jquery + javascript event

© Copyright 2024. All rights reserved.