'HTML 참고서'에 해당되는 글 29건

22.JavaScript event 2

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 17. 15:34 
<html>
    <head>
        <style>
            html{border:5px solid red;padding:30px;}
            body{border:5px solid green;padding:30px;}
            fieldset{border:5px solid blue;padding:30px;}
            input{border:5px solid black;padding:30px;}
        </style>
    </head>
    <body>
        <fieldset>
            <legend>event propagation</legend>
            <input type="button" id="target" value="target">
        </fieldset>
        <script>
        function handler(event){
            var phases = ['capturing', 'target', 'bubbling']
            console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
        }

        function stophandler(event){
            var phases = ['capturing', 'target', 'bubbling']
            console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
            event.stopPropagation();
        }
        document.getElementById('target').addEventListener('click', handler, true);
        document.querySelector('fieldset').addEventListener('click', handler, true);
        document.querySelector('body').addEventListener('click', stophandler, true);
        document.querySelector('html').addEventListener('click', handler, true);
        </script>
    </body>
</html>

ㅇ

음좀더 공부를 하고 생각을 해야겠다 

phases 에서 받는것이 입력되어온 값인듯 한데 event자체가 target이되는것아닌가???

잘 모르겟다

phases 가 뭔지 이해가 안간다

 

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

24.JavaScript load event  (0) 2020.04.17
23.JavaScript event 3  (0) 2020.04.17
20.JavaScript event 1  (0) 2020.04.17
19.JavaScript property  (0) 2020.04.17
18.JavaScript Inline  (0) 2020.04.17
블로그 이미지

Or71nH

,

20.JavaScript event 1

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 17. 11:51 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  <input type="button" id="target" value="button" />
  <script>
  var t = document.getElementById('target');
if(t.addEventListener){
    t.addEventListener('click', function(event){
        alert('Hello world, '+event.target.value);
    }); 
} else if(t.attachEvent){
    t.attachEvent('onclick', function(event){
        alert('Hello world, '+event.target.value);
    })
}
</script>
  </body>

</html>

 

 

하나씩 쓰는 방법

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
    var t1 = document.getElementById('target1');
    var t2 = document.getElementById('target2');
    function btn_listener(event){
        switch(event.target.id){
            case 'target1':
                alert(1);
                break;
            case 'target2':
                alert(2);
                break;
        }
    }
    t1.addEventListener('click', btn_listener);
    t2.addEventListener('click', btn_listener);
</script>
  </body>

</html>

이렇게 쓰면 함수 하나로 여러게를 쓸수 있다

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

23.JavaScript event 3  (0) 2020.04.17
22.JavaScript event 2  (0) 2020.04.17
19.JavaScript property  (0) 2020.04.17
18.JavaScript Inline  (0) 2020.04.17
17.JavaScript Coding setInterval  (0) 2020.04.17
블로그 이미지

Or71nH

,

19.JavaScript property

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 17. 11:49 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.onclick = function(event){
      var event = event || window.event;

        //alert('Hello world, '+event.target.value)
        console.dir(event);
        var target = event.target || event.srcElement;
        alert('Hello world, '+target.value)

    }
</script>
  </body>

</html>

 

 

 

 

익스플로워 호환성을 고려하여 문제해결 8이하버전 호환하려면

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

22.JavaScript event 2  (0) 2020.04.17
20.JavaScript event 1  (0) 2020.04.17
18.JavaScript Inline  (0) 2020.04.17
17.JavaScript Coding setInterval  (0) 2020.04.17
16.JavaScript NodeText  (0) 2020.04.17
블로그 이미지

Or71nH

,

18.JavaScript Inline

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 17. 11:26 
<!--자기 자신을 참조하는 불편한 방법-->
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
<!--this를 통해서 간편하게 참조할 수 있다-->
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

this 를 이용하여 자기자신을 불러오기 떄문에 id를 참조하지 안아도 되어 관리하기 편하다

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

20.JavaScript event 1  (0) 2020.04.17
19.JavaScript property  (0) 2020.04.17
17.JavaScript Coding setInterval  (0) 2020.04.17
16.JavaScript NodeText  (0) 2020.04.17
15.JavaScript Node API  (0) 2020.04.16
블로그 이미지

Or71nH

,

17.JavaScript Coding setInterval

HTML 참고서/HTML 생활코딩 Youtube 2020. 4. 17. 11:24 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <style>
      body{
          padding:0;
          margin:0;
      }
      div{
          border:50px solid #1065e6;
          padding:50px;
          margin:50px;
      }
      #target{
          width:100px;
          height:2000px;
      }
    </style>
        <div>
            <div id="target">
                Coding
            </div>
        </div>

    <script>
    var t = document.getElementById('target');
    setInterval(function(){
        console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset);
    }, 1000)
    </script>
  </body>

</html>

SetInterval 이것은 

1번째 인자의 부분을 

2번째 인자의 시간으로 계속 불어온다 

 

 

'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글

19.JavaScript property  (0) 2020.04.17
18.JavaScript Inline  (0) 2020.04.17
16.JavaScript NodeText  (0) 2020.04.17
15.JavaScript Node API  (0) 2020.04.16
14. JavaScript Node  (0) 2020.04.16
블로그 이미지

Or71nH

,

공지사항

카테고리

글 보관함

달력

«   2024/12   »
일 월 화 수 목 금 토
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

티스토리툴바