๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€/JavaScript

[ex26] ์š”์†Œ(ํƒœ๊ทธ)์˜ ์ด๋ฒคํŠธ ์ผ๊ด„์ฒ˜๋ฆฌ

๋Œ€์žฅ์ฟต์•ผ 2023. 4. 26. 11:59

ex26

 

http://127.0.0.1:5500/javascript/ex26_event.html

 

์ฝ”๋“œ

<!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>Document</title>
    <style>

        .item {
            border: 1px solid #CCC;
            background-color: #EEE;
            padding: 10px;
            margin: 15px;
            width: 400px;
            text-align: center;
        }

        .item > input[type=button] {
            border: 1px solid #CCC;
            background-color: #FFF;
            width: 100px;
            height: 60px;
            margin: 10px;
            outline: none;
        }

    </style>
</head>
<body>
    <!-- ex26_event.html -->
    <h1>๋‹ค๋Ÿ‰์˜ ์š”์†Œ(ํƒœ๊ทธ)์˜ ์ด๋ฒคํŠธ (์ผ๊ด„) ์ฒ˜๋ฆฌ</h1>

    <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>
    
    <div class = "item">
        <input type="button" name="btnRed2" value="๋นจ๊ฐ•">
        <input type="button" name="btnYellow2" value="๋…ธ๋ž‘">
        <input type="button" name="btnBlue2" value="ํŒŒ๋ž‘">
    </div>
    
    <!-- ๋งค๊ฐœ๋ณ€์ˆ˜์— ๋”ฐ์˜ดํ‘œ ๋นผ๋จน์ง€๋ง๊ฒƒ -->
    <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>
    
    <!-- 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>
    
    <div class = "item">
        <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>
    
    <!-- data-X : ์‚ฌ์šฉ์ž ์ •์˜ -->
    <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>
    
    <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>
    
    <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>
    
    <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>

    <div class = "item">
        <input type="button" name="" value="">
        <input type="button" name="" value="">
        <input type="button" name="" value="">
    </div>\

    <hr>

    <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>

    <img src="images/0.png">


    <script>

        // alert(document.images.length);
        // alert(document.images['cat'].src); 
        // alert(document.all.cat.length);

        for (var i=0; i<document.all.cat.length; i++) {
            document.all.cat[i].onclick = m14;
        }

        function m1() {
            document.body.bgColor = 'red';
        }

        function m2() {
            document.body.bgColor = 'yellow';
        }
        
        function m3() {
            document.body.bgColor = 'blue';
        }


        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';
        }

        function m7(color) {
            document.body.bgColor = color;
        }

        //ํ•จ์ˆ˜๋‚ด์˜ this๋Š” window ๊ฐ์ฒด(์ „์—ญ ๊ฐ์ฒด)๋ฅผ ๋งํ•œ๋‹ค.
        function m8(btn) {
            // alert(btn.value);
            // alert(this.value);

            if (btn.value == '๋นจ๊ฐ•') {
                document.body.bgColor ='red';
            } else if (btn.value == '๋…ธ๋ž‘') {
                document.body.bgColor = 'yellow'
            } else if (btn.value == 'ํŒŒ๋ž‘') {
                document.body.bgColor = 'blue'
            }

        }

        function m9(btn) {
            // alert(btn.name); //btnRed > ์ด๋ฆ„์˜ ํŒจํ„ด์„ ์ด์šฉํ•ด์„œ Red๋งŒ ๋”ฐ์˜ค๊ธฐ
            document.body.bgColor = btn.name.substring(3);
        }

        function m10(btn) {
            // <input data-color="red"
            // alert(btn.dataset['color']);

            document.body.bgColor = btn.dataset['color'];
        }

        function m11() {
            //์–ด๋–ค ๋ฒ„ํŠผ์ด ๋ˆŒ๋ ธ๋Š”์ง€??
            //- event ๊ฐ์ฒด > ๋ˆŒ๋ฆฐ ๋ฒ„ํŠผ ์ œ๊ณต

            //์ด๋ฒคํŠธ ๋ฐœ์ƒ ์ฃผ์ฒด(ํƒœ๊ทธ) > m11(this)
            //alert(event.srcElement);
            //alert(event.target);

            // alert(event.target.dataset['color']);
            document.body.bgColor = event.target.dataset['color'];

        }

        document.all.btnRed3.onclick = m12;
        document.all.btnYellow3.onclick = m12;
        document.all.btnBlue3.onclick = m12;

        function m12() {
            document.body.bgColor = event.target.dataset['color'];
        }

        //name='btn' ๋ฐฐ์—ด
        //1. name ์œ ์ผ > ๋‹จ์ผ ๊ฐ์ฒด
        //2. name ์ค‘๋ณต > ๋ฐฐ์—ด
        // alert(document.all.length);

        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'];
        }

        function m14() {
            event.target.width = 300;
        }


    </script>
</body>
</html>

'ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€ > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ex28~30] check, radio, range  (0) 2023.04.27
[ex27] form(์œ ํšจ์„ฑ ๊ฒ€์‚ฌ)  (0) 2023.04.26
[ex24~25] ๋กค์˜ค๋ฒ„ ์ด๋ฏธ์ง€, ๋ฉ”์„ธ์ง€ ๋ฐ•์Šค  (0) 2023.04.26
[ex18~22] screen, location, history, collection, link  (0) 2023.04.25
[ex17] window  (0) 2023.04.24

'ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€/JavaScript' Related Articles

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”