이벤트 정리
javascript& jquery에서만 사용되는 이벤트들이 많이 있어요. 이벤트들을 정리해볼 필요가 있다고 생각해서 아래에 작성하겠습니다. 기본적인 이벤트는 on이라는 이름이 붙습니다. 또한 jquery에서도 ('id값').on('click',function(){});와 같이 on을 사용합니다. ('id값').click(function(){});도 쓸수 있지만, 대체적으로 이벤트는 on으로 시작합니다.
onblur
개체가 포커스를 잃었을 때
onchange 개체 혹은 선택영역의 내용이 바뀔 때 발생한다.
onclick
onfocus
개체가 포커스를 받았을 때 발생한다.
onkeydown
사용자가 키를 눌렀을 때
onkeypress
onkeyup
사용자가 키를 놓았을 때 발생한다.
onload
브라우저가 개체를 로드한 후에 발생한다.
onmouseout
개체밖으로 마우스 포인터가 빠져나갈 때 발생한다.
onmouseover
onresize
개체의 크기가 바뀔 때 발생한다.
사용자가 개체 내의 스크롤 바를 스크롤할 때 발생한다.
onsubmit
폼이 전송되기 직전에 발생한다.
onunload
개체가 언로드되기 직전에 발생한다.
그 외의 이벤트들도 많습니다. 가장 대표적인 것들만 나열했으니 참고하세요.
| 키보드를 통한 이벤트 | onkeypress, onkeydown, onkeyup, |
| 마우스를 통한 이벤트 | mouseover, mousedown, onclick |
| 입력을 통한 이벤트 | onsubmit, onchange, onfocus, onblur, |
| 윈도우를 통한 이벤트 | onload, onresize, onunload, onscroll |
문제1)
- 함수1: 커서의 초기value값은 ABCD로
- 함수2: 커서의 포커스를 잃으면 소문자로 바꿔주도록
- 함수3: 입력 암호의 길이 6자이상 10자 이하인지 체크한 결과를 작성한 뒤, unfocus되면 result태그 출력
- 아이디입력: text
- 비번입력: password
- 성별선택: radio 여자, 남자
- div1개
※ onfocus="auto()" onblur="lower()를 이용하세요
body태그안에 text1개, password1개, radio2개, button1개, div1개를 미리 만들어
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function auto(){ //커서의 초기value값은 ABCD로 저장된다.
document.getElementById('id').value='ABCD'; // 초기value값은 없지만, ABCD로 초기화하세요.
}
function lower(){ //커서의 포커스를 잃으면 소문자로 바꿔주도록 한다.
var id= document.getElementById('id').value;
var id= document.getElementById('id').value = id.toLowerCase(); // 소문자로 바꾸고, 다시 id에 저장한다.
}
function checkpw(){
//입력 암호의 길이 6자이상 10자 이하인지 체크한 결과를 작성한 뒤, unfocus되면 result태그 출력한다.
var pw= document.getElementById('pw').value;
if(pw.length>=6 && pw.length<=10){
var pw_result= '유효함';
}
else{
var pw_result= '유효하지 않음';
}
document.getElementById('result').innerHTML=pw_result;
//div안의 내용을 작성하기 위해 innerHTML을 쓴다. (value는 X)
}
</script>
</head>
<body><!-- 처음부터 속성값을 보여주고싶으면 value -->
아이디입력: <input type=text id='id' onfocus="auto()" onblur="lower()"><br>
비번입력: <input type="password" id='pw' maxlength='10' onblur="checkpw()"><br> <!-- required="required" -->
성별선택: <input type="radio" id="gender" name='gender'> 남자
<input type="radio" id="gender" name='gender'> 여자 <br>
<input type="button" onclick="checkpw()" value='체크'><br>
<!-- 여기서 checkpw함수의 이벤트처리를 두가지로 적용됬다. (1)커서를 이용한 onblur (2)버튼을 이용한 onclick -->
<div id='result'></div> <!-- radio를 같은 name으로 지정해야 복수선택을 방지가능하다 -->
</body>
|
<코드결과>
아이디입력란에 커서를 올렷을 때, ABCD초기화된다.
그리고 비번 6~10작성시 유효함이 출력된다.
아이디입력란에 문자작성하고 커서를 빼면, 소문자로 변경한다.
그리고 비번이 범위안에 없을경우 유효하지않음이 출력된다.
문제2)
- 함수1: 이미지에 마우스를 가져다대면 사진 커지도록 한다.
- 함수2: 마우스를 빼면 사진이 다시 작아지도록 한다.
- 이미지1개
※ onmouseover="big()" onmouseout="small()"를 이용하세요
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//var target= document.getElementById('target'); 함수밖에 작성하면 동작하지않는다. 아직 존재하지않는 target을 head에서 찾다보니까
function big(){
var target= document.getElementById('target');
target.width=300;
target.height=200;
}
function small(){
target.width=100;
target.height=50;
}
</script>
</head>
<body>
<!-- 최초는 원본 이미지 크기 그대로 -->
<!-- 이미지위 마우스온: big() && 이미지위 마우스아웃: small() -->
<img id='target' src='../images/google.png' onmouseover="big()" onmouseout="small()">
<!-- 모든상태는 on을 붙인다 -->
<!-- <!-- 이미지클릭시 마우스온: down() && 이미지 클릭떼면 마우스아웃: up() -->
<!-- <img id='target' src='../images/1.jpg' onmousedown="big()" onmouseup="small()"> -->
</body>
|
<코드결과>
마우스를 갖다댓을때는 오른쪽처럼 커지고, 마우스를 다시 빼면 왼쪽처럼 작아진다.
문제3)
- 함수1: 20제한수 읽어서 변수에 저장하기
- 함수2: 입력될때마다 제한수의 변경, 0보다작으면 글자가 안적히도록 alert경고창을 사용한다.
- h1태그: 20제한수 (빨간글씨)
- h2태그: 글자출력
- textarea 입력창 1개
※ disabled="disabled";를 이용하세요
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var initial; //전역변수
window.onload = function(){ //읽어오는 함수
initial =
document.getElementById("max").innerHTML;
}
function check(){//ab
var text = document.getElementById("text").value; //text-align값이라서 value
var max = initial - text.length;
document.getElementById("max").innerHTML= max; //max값을 innerHTML안에 넣고 출력
//추가 css 적용
document.getElementById("max").style = "color:red; font : 궁서";
if(max < 0){
alert("입력초과");
document.getElementById("text").disabled="disabled";
}
}
</script>
</head>
<body>
<h1 id="max">20 </h1>
<h3>글자까지 입력가능합니다. </h3>
<textarea id="text" cols="50" rows="10"
onkeyup="check()"></textarea>
<!--text id 태그내부 글자 1개 입력하면
max id 태그 내부 -1 -->
</body>
</html>
|
<코드결과>
입력하기 전의 상태창은 다음과 같다.
입력을 하게되면 빨간글씨와 함께 숫자가 줄어들게 된다.
그리고 0보다 미만을 제한해 두었기때문에 alert경고창이 뜬다.
문제4)
1. 현재문서는 없어지고 구글로 이동한다. (이전은 돌아가기를 클릭)
2. 현재 문서 내부 프레임창 내부 구글
<iframe name='a'>
<a href='www.google.com' target='a'> 구글이동 </a>
3. 현재 문서 그대로 새창 열어 구글 이동
※ target은 iframe태그와 함께 사용될 때 사용되는 주소저장용도
위의 선택창중에서 1번으로 코드내용을 짜봤습니다. window객체에서도 많은 메서드들이 있습니다. 대표적으로는 document와 open이 있습니다. 아래와 같이 window.open(URL, name, specs, replace); 로 작성되어야 합니다.
window: 생략이 가능합니다.URL: 오픈할 페이지의 URL이 들어갑니다.name: _blank, _parent, _self, _top, name이 들어갑니다specs: top/width/left/height=pixels, menubar=yes|no|l|o, resizable=yes|no|l|o, scrollbars=yes|no|l|o, titlebar=yes|no|l|o입니다
replace: 히스토리 리스트에서 새로운 엔트리인지, 아니면 현재 엔트리인지를 대체하는 여부, true=replace, false=create
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> window </title>
<script>
function movesite(){
//새창 열어서 구글이동
//window.open(url, 창이름, 화면크기, 스크롤바, 뒤로가도 아무것도없다는 t/f)
//window.open의 window는 생략가능
open('http://www.google.com', '_blank', 'width=300, height=300');
}
function movehtml(){
window.open('../study5/Dom5.html',"","width=300, height=200");
}
</script>
</head>
<body>
<input type="button" onclick="movesite()" value="구글이동">
<input type="button" onclick="movehtml()" value="sample.html이동">
</body>
</html>
|
'WEB 기초 > Script' 카테고리의 다른 글
| 22. 내부객체 & window객체 "총"정리 (0) | 2018.04.15 |
|---|---|
| 21. 함수를 이용한 계산기 (0) | 2018.04.15 |
| 19. Dom (document object model 문서객체모델)이란? (0) | 2018.04.15 |
| 18. 게시판 응용하기 (0) | 2018.04.15 |
| 17. 주소 공백 분할(String 내부객체) (0) | 2018.04.12 |