728x90
★ Event > 다량의 요소(태그)의 (일괄) 처리
- 버튼을 통한 배경색 변경
- 방법 1 : 정적으로 일일이 각자 생성
<body>
<div class="item">
<input type="button" name="btnRed" value="빨강" onclick="m1();">
<input type="button" name="btnYellow" value="노랑" onclick="m2();">
<input type="button" name="btnBlue" value="파랑" onclick="m3();">
</div>
<script>
function m1() {
document.body.bgColor = 'red';
}
function m2() {
document.body.bgColor = 'yellow';
}
function m3() {
document.body.bgColor = 'blue';
}
</script>- 방법 2 : 동적으로 일일이 각자 생성
document.all.btnRed2.onclick = m4;
document.all.btnYellow2.onclick = m5;
document.all.btnBlue2.onclick = m6;
function m4() {
document.body.bgColor = 'red';
}
function m5() {
document.body.bgColor = 'yellow';
}
function m6() {
document.body.bgColor = 'blue';
}- 방법 3 : 함수 하나로, 매개변수를 받아 설정
<div class="item">
<input type="button" value="빨강" onclick="m7('red');">
<input type="button" value="노랑" onclick="m7('yellow');">
<input type="button" value="파랑"
onclick="m7('blue');">
</div>
<script>
function m7(color) {
document.body.bgColor = color;
}
</script>- 방법 4 : this를 이용한 함수
<!-- this : 이벤트 주체(이벤트가 걸린 태그) -->
<div class="item">
<input type="button"value="빨강" onclick="m8(this)">
<input type="button"value="노랑" onclick="m8(this)">
<input type="button"value="파랑" onclick="m8(this)">
</div>
<script>
function m8(btn) {
// alert(btn.value);
// alert(this.value); //함수내의 this
if(btn.value == '빨강') {
document.body.bgColor = 'red';
}else if(btn.value == '노랑') {
document.body.bgColor = 'yellow';
}else if(btn.value == '파랑') {
document.body.bgColor = 'blue';
}
}
</script>- 방법 5 : this를 이용한 조금 나은 표현
<div class="item">
<!-- this : 이벤트 주체(이벤트가 걸린 태그) -->
<input type="button" name="btnRed" value="빨강" onclick="m9(this)">
<input type="button" name="btnYellow" value="노랑" onclick="m9(this)">
<input type="button" name="btnBlue" value="파랑" onclick="m9(this)">
</div>
<script>
function m9(btn) {
document.body.bgColor = btn.name.substring(3);
}
</script>- 방법 6 : 사용자 정의 속성
- data-xxx
<div class="item">
<input type="button" name="btnRed" value="빨강" onclick="m10(this);" data-color="red">
<input type="button" name="btnYellow" value="노랑" onclick="m10(this)" data-color="yellow">
<input type="button" name="btnBlue" value="파랑" onclick="m10(this)" data-color="blue">
</div
<style>
function m10(btn) {
document.body.bgColor = btn.dataset['color'];
}
</style>- 방법 7 : 정적 이벤트 발생 주체(태그) > m11(this)
<div class="item">
<input type="button" name="btnRed" value="빨강" onclick="m11();" data-color="red">
<input type="button" name="btnYellow" value="노랑" onclick="m11()" data-color="yellow">
<input type="button" name="btnBlue" value="파랑" onclick="m11()" data-color="blue">
</div>
<style>
function m11() {
//어떤 버튼이 눌렸는지??
//- event 객체 > 눌린 버튼 제공
//이벤트 발생 주체(태그)
// alert(event.srcElement);
// alert(event.target);
document.body.bgColor = event.target.dataset['color']
}
</style>- 방법 8 : 동적 이벤트 발생 주체(태그) > m12(this)
<div class="item">
<input type="button" name="btnRed3" value="빨강" data-color="red">
<input type="button" name="btnYellow3" value="노랑" data-color="yellow">
<input type="button" name="btnBlue3" value="파랑" data-color="blue">
</div>
<style>
document.all.btnRed3.onclick = m12;
document.all.btnYellow3.onclick = m12;
document.all.btnBlue3.onclick = m12;
function m12() {
document.body.bgColor = event.target.dataset['color'];
}
</style>- 방법 9 : name='btn' 배열
- 1. name 유일 > 단일 객체
- 2. name 중복 > 배열
<div class="item">
<input type="button" name="btn" value="빨강" data-color="red">
<input type="button" name="btn" value="노랑" data-color="yellow">
<input type="button" name="btn" value="파랑" data-color="blue">
</div>
<style>
for (var i=0; i<document.all.btn.length; i++) {
document.all.btn[i].onclick = m13;
}
function m13() {
document.body.bgColor = event.target.dataset['color'];
}
</style>
■ 이미지를 이용한 ex)
- HTML
<div>
<img src="images/catty01.png" name="cat">
<img src="images/catty02.png" name="cat">
<img src="images/catty03.png" name="cat">
<img src="images/catty04.png" name="cat">
<img src="images/catty05.png" name="cat">
</div>- Script
// alert(document.images['cat'].length);
// alert(document.images['cat'].src); > 배열 X
// alert(document.all.cat.length); > 이렇게 하면 됨
for(var i=0; i<document.all.cat.length; i++) {
document.all.cat[i].onclick = m14;
}
function m14() {
event.target.width = 300;
}728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 24 - FORM (0) | 2023.04.24 |
|---|---|
| JAVASCRIPT STEP 23 - 응용 예제2 (0) | 2023.04.24 |
| JAVASCRIPT STEP 21 - Message (0) | 2023.04.24 |
| JAVASCRIPT STEP 20 - Image (0) | 2023.04.24 |
| JAVASCRIPT STEP 19 - LINK (0) | 2023.04.24 |
