728x90
이벤트
이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다. 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 합니다.
이벤트 타입
이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 합니다. 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공되고 있습니다.
실습
실습 1 - 키보드 입력 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 입력 이벤트</title>
<style type="text/css">
input {
border: 5px solid black;
}
</style>
</head>
<body>
<input type="text" onkeydown="test(event)" placeholder="keydown 이벤트">
<script type="text/javascript">
function test(event){
console.log(event.keyCode);
if (event.keyCode == 13) {
console.log(event.target); // Thread
alert(event.target.value); // 브라우저에서 alert 먼저 띄우고 -> console.log 찍힘
}
}
</script>
</body>
</html>
실습 2 - 마우스 입력 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 입력 이벤트</title>
<style type="text/css">
#box {
width: 50px;
height: 50px;
background-color: lightgray;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" onmouseover="test1(this)" onmousedown="test2(this)" onmouseout="test3(this)"></div>
<script type="text/javascript">
function test1(obj) {
obj.style.backgroundColor = 'lightgreen';
}
function test2(obj) {
obj.style.backgroundColor = 'lightpink';
}
function test3(obj) {
obj.style.backgroundColor = 'lightblue';
}
</script>
</body>
</html>
실습 3 - 속성 값에 따른 이벤트
- 1번째 목록
- 2번째 목록
- 3번째 목록
- 4번째 목록
- 5번째 목록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button type="button" onclick="test()">id속성값이 check인 목록에 변화주기</button>
<br><br>
<button type="button" onclick="test2()">class속성값이 check2인 목록에 변화주기</button>
<ul>
<li class="check2">1번째 목록</li>
<li id="check">2번째 목록</li>
<li class="check2">3번째 목록</li>
<li>4번째 목록</li>
<li class="check2">5번째 목록</li>
</ul>
<script type="text/javascript">
function test() {
var obj = document.getElementById('check');
obj.style.backgroundColor = 'blue';
}
function test2() {
var arr = document.getElementsByClassName('check2');
for (var i = 0; i < arr.length; i++) {
arr[i].style.backgroundColor = 'gray';
}
}
</script>
</body>
</html>
실습 4 - 이벤트 리스너 등록
- 1번째 목록
- 2번째 목록
- 3번째 목록
- 4번째 목록
- 5번째 목록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
li {
margin: 10px;
cursor: pointer;
border: 1px solid black;
}
.click {
/* 클릭 이벤트를 통해
클래스명이 click이 된 요소가 있다면, */
background-color: lightpink !important;
}
</style>
</head>
<body>
<ul>
<li>1번째 목록</li>
<li>2번째 목록</li>
<li>3번째 목록</li>
<li>4번째 목록</li>
<li>5번째 목록</li>
</ul>
<script type="text/javascript">
var arr = document.querySelectorAll('li');
// 이벤트를 연결할때에
// 이벤트 리스너를 등록하는 방식으로 적용할 수 있다!
for (var i = 0; i < arr.length; i++) {
// arr[i].addEventListener('이벤트명', '함수명');
arr[i].addEventListener('mouseover', function(){
this.style.backgroundColor = 'lightgray';
});
arr[i].addEventListener('mouseout', function(){
this.style.backgroundColor = 'white';
});
// 함수를 바로 연결하는 방식
// 일반적으로, 사전에 등록해둔 CSS와 연결되게끔 코드를 작성하는편
arr[i].onclick = test;
}
function test() {
if (this.className == 'click') {
this.className = '';
}
else {
this.className = 'click';
}
}
</script>
</body>
</html>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
728x90
