본문 바로가기
프로그래밍 공부/jQuery

jQuery - 이벤트 上

신입사원 최종원 2019. 12. 27. 08:56

jQuery를 이용하면 이벤트를 연결하는 방법이 기존에 자바스크립트에서 이벤트를 연결 하는 것보다 편하게 이용할 수 있다.

메서드 이름 설명
on() 이벤트를 연결한다.
off() 이벤트 연결을 제거한다.
one() 이벤트를 한 번만 연결한다.

위의 3개의 메서드를 사용한다. 사용하지 않아도 문제는 없다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
</head>
<body>
     <h1>HEADER</h1>
     <a href='http://www.naver.com'>네이버</a>
     <script>
          $('h1').click(function(event){
               alert(event.currentTarget);
               $(event.currentTarget).html('CLICK');
               $(this).css('color', 'red');
               // event.stopPropagation();
          })
          $('h1').click(100, function(event){
               alert('JavaScript!');
               alert(event.data);
               // event.stopPropagation();
          })
          $('a').click(function(event){
               // event.preventDefault();
               // event.stopPropagation();

               return false;
          })
          $('body').click(function(){
               $(this).css('background-color', 'orange')
          })
     </script>
</body>
</html>

이벤트를 발생시킨 객체를 찾을 때는 event.currentTarget을 사용한다. 또한 this 키워드 역시 사용할 수 있다. $('h1').click(100, function(event){} 에서 100은 data 값을 의미한다. $('body').click(function(){ $(this).css('background-color', 'orange') })로 인해 <h1>태그나 <a>태그를 눌러도 화면이 오렌지색으로 바뀌게 되는데 이것을 방지하게 위해 각각의 <h1>태그와 <a>태그에 event.stopPropagation(); 메서드를 넣어서 동시에 눌리는것을 방지 할 수 있다. 다른 방법으로는 jQuery에서는 return false를 입력하는 방법도 있다. <a> 태그 그러니까 앵커 태그의 기본 이벤트를 지우는 방법도 event.preventDefault();를 입력해 기본 이벤트를 지우는 방법이 있다.

이렇듯 구지 on() 메서드를 사용하지 않아도 이벤트를 연결할 수는 있으나, on() 메서드를 사용하면 좀더 편하게 연결이 가능하다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <script>
          $(document).ready(function(){
               $('body').on('click', 'h1', function(){
                    alert(this);
                    $(this).html('click');
                    $('<h1></h1>').html('Hello').appendTo('body');
               })
          })
</head>
<body>
     <h1>HEADER</h1>
</body>
</html>

on() 메서드를 두 가지 방법으로 사용할 수 있다.

1. $(selector).on(eventName, function(event){})
2. $(selector).on(object)

jQuery를 사용하면 이벤트를 간단하게 연결할 수 있는 장점이 있다. 사실 $(document).ready()의 ready() 메서드 역시 이벤트이다. 기본적으로 jQuery에서 이벤트를 연결하는 기본 형태는 아래와 같다.

$(selector).method(function(event){});

기본 형태는 알아두어야 한다. 또한 이벤트의 이름(종류)은 이전에 자바스크립트에서 배웠던 부분을 참고하는게 좋다.

JavaScript - 이벤트 종류 : https://miyakita.tistory.com/119

 

JavaScript - 이벤트 종류

1-1. 마우스 이벤트 이벤트 이름 설명 mouseenter 포인터가 이벤트 핸들러로 등록된 요소 위로 이동했을 때 mouseover 포인터가 이벤트 핸들러로 등록된 요소나 그 자식 요소 위로 이동했을 때 mousemove 포인터..

miyakita.tistory.com

이벤트의 연결을 제거하는 방법은 off() 메서드를 사용하는 것이다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <script>
          $(document).ready(function(){
               $('h1').click(function(){
                    $('h1').html('CLICK');
                    alert('이벤트 발생');
                    $('h1').off('click');
               })
          })
     </script>
</head>
<body>
     <h1>HEADER</h1>
     <h1>HEADER</h1>
     <h1>HEADER</h1>
</body>
</html>

off() 메서드는 아래와 같은 형태가 있다.

1. $(selector).off()
2. $(selector).off(eventName)
3. $(selector).off(eventName, function)

one() 메서드는 on() 메서드와 같은 형태를 가지고 있다. 

jQuery의 메서드는 매개변수를 두개 입력할 수 있는데, selector 이외에도 context 매개변수도 넣을 수 있다. context 매개변수는 selector가 적용하는 범위를 한정할 수 있다. 일반적으로 이벤트와 같이 사용한다. 

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <script>
          $(document).ready(function(){
               $('div').click(function(){
                    let header = $('h1', this).text();
                    let paragraph = $('p', this).text();
                    alert(header + '\n' + paragraph);
               })
          })
     </script>
</head>
<body>
<div>
     <h1>HEADER - 1</h1>
     <p>Paragraph</p>
</div>
 <div>
     <h1>HEADER - 2</h1>
     <p>Paragraph</p>
</div>
 <div>
     <h1>HEADER - 3</h1>
     <p>Paragraph</p>
</div>
</body>
</html>

특정 부분에 선택자를 적용하고 싶을 때 사용하는 것이 매개변수 context이다. 위의 코드는 <div> 태그를 클릭했을 때, 클릭한 <div> 태그 내부의 <h1> 태그와 <p> 태그가 가지는 내용을 출력 시킨다. click 이벤트가 발생한 문서 객체 안에서 <h1>, <p> 태그를 선택하고 싶을 때에는 this 키워드를 $() 메서드 안에 두 번째 매개변수로 넣어주면 된다. 범위를 이벤트 발생 객체로 한정하게 되어서 쉽게 이벤트 발생 객체 안에만 선택자를 적용할 수 있다.

jQuery 이벤트 上.html
0.00MB

'프로그래밍 공부 > jQuery' 카테고리의 다른 글

jQuery - 캔버스 애니메이션을 위한 틀  (0) 2019.12.30
jQuery - 효과  (0) 2019.12.30
jQuery - 이벤트 下  (0) 2019.12.27
jQuery - 문서 객체 조작  (0) 2019.12.24
jQuery - jQuery 자바스크립트 라이브러리  (0) 2019.12.23

'프로그래밍 공부/jQuery' Related Articles

티스토리툴바