<html>
    <head>

    </head>
    <body>
      
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
        $('body').on('click','a, li', function(event){
            console.log(this.tagName);
        })
      </script>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
    </body>
</html>

이렇게 쓰면 추후에 추가되는 것들에도 함수를 넘길 수 있다

 

<html>
    <head>

    </head>
    <body>
      <input type="text" id="target" />
      <p id="status"></p>
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
          $('#target').on('focus blur', function(e){
              $('#status').html(e.type);
          })
      </script>
    </body>
</html>

ㅇ이렇게 하면 포커스와 블러를 설정할수 있다 신기하다 

<html>
    <head>

    </head>
    <body>
      <input type="text" id="target"></textarea>
      <input id="remove"  type="button" value="remove" />
      <p id="status"></p>
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
        var handler = function(e){
          $('#status').text(e.type+Math.random());
        };
        $('#target').on('focus blur', handler)
        $('#remove').on('click' , function(e){
          $('#target').off('focus blur', handler);
          console.log(32);
        })
      </script>
    </body>
</html>

ㅇ이해못햇음 

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

정리 x 공부중  (0) 2020.08.19
25.JavaScript Form event  (0) 2020.04.17
24.JavaScript load event  (0) 2020.04.17
23.JavaScript event 3  (0) 2020.04.17
22.JavaScript event 2  (0) 2020.04.17
블로그 이미지

Or71nH

,