21. jquery

일반적인 javascript를 사용해 코딩한것과 jquery를 쓰는것에 대해 간단히 확인해본다.

 

# body 태그

<input type="button" id="pure" value="pure" />
<input type="button" id="jquery" value="jquery" />

 

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    var pure = document.getElementById('pure');
    if(pure.addEventListener){
        pure.addEventListener('click', function(event){
            alert('pure');
        });
    } else{
        pure.attachEvent('onclick', function(event){
            alert('pure');
        });
    }

    $('#jquery').on('click', function(event){
        alert('jquery');
    })
</script>

위와 같이 코드를 작성했다.

 

pure는 순수한 자바스크립트를 이용해서 엘리먼트 객체에 대한 작업을 한 코드이고,

jquery는 단어 그대로 jquery를 이용한 코드이다.

 

pure 부분은 브라우저 버전에 따라 addEventListener가 지원되지 않으면 attachEvent 메소드를 사용하도록 분기시켰다.

 

jquery 부분에서 on은 브라우저 버전에 따라 적당한 이벤트 핸들러를 사용하도록 한다.

 

간단한 코드로만 보아도 jquery를 이용하는게 코드가 간편해짐을 알 수 있다.

 

1. on API

---

on 은 이벤트를 처리하는 메소드다.

click, onclick 등으로 사용해도 되지만 셀럭터를 이용해 일종의 필터링 기능으로 사용할 수 있다.

바로 코드로 확인해본다.

 

<ul>
    <li><a>Son</a></li>
    <li><a>Kane</a></li>
    <li><a>Alli</a></li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
    $('ul').on('click', 'li, a', function(event){
        console.log(this.tagName);
    })
</script>

ul 안에 li와 a태그를 만들었다.

 

jquery를 통해 ul 엘리먼트에 대하여 click 이벤트 발생 시 li와 a 엘리먼트에 대해서 3번째 인자로 정의된 함수를 실행한다.

여기서의 this는 ul 태그가 아닌 이벤트를 필터링한 a와 li 태그가 된다.

 

HTML 텍스트를 한번 클릭했을 때 console 창에 A와 LI 의 태그명이 출력되는 것을 확인할 수 있다.

 

저 script 부분이 ul, li, a 태그 상단으로 올라가게 되면 jquery가 실행되지 않는다.

jquery 코드를 읽는 시점에서는 ul, li, a 엘리먼트가 존재하지 않는 시점이기 때문이다.

 

하지만 태그명을 body로 변경해주면 이벤트가 설치되어 잘 실행이 된다.

$('body').on('click', 'li, a', function(event){
        console.log(this.tagName);
    })

 

 

2. 이벤트 바인딩

---

위에 정리했다시피 특정 엘리먼트에 이벤트 설치 시 on API를 이용한다.

 

하나의 on API에서 하나의 이벤트 핸들러를 두 개 이상의 이벤트가 동작했을 시 발생할 수 있게 설정할 수 있다.

즉, 각각의 이벤트 동작들이 하나의 이벤트 핸들러를 공유할 수 있게 된다.

 

또한 이러한 방식들에 대해 jquery 코드를 작성하는 방법도 여러가지가 있다.

 

먼저 body 태그의 html 코드는 다음과 같다.

<input type="text" id="text" />
<p id="sjh"></p>

 

- 첫 번째

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    $('#text').on('focus blur', function(e){
        $('#sjh').html(e.type)
    })
</script>

 

- 두 번째(이벤트 동작들에 대한 내용을 연결해서 코딩)

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    var f = function(e){
        $('#sjh').html(e.type);
    }
    $('#text').on('focus', f).on('blur', f);
</script>

 

- 세 번째(on API 안에 중괄호를 이용해서 코딩)

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    var f = function(e){
        $('#sjh').html(e.type)
    }
    $('#text').on(
        {
            'focus' : f,
            'blur' : f
        }
    )
</script>

 

모두 같은 결과가 나온다.

focus 될 때 p 태그에 이벤트 타입인 focus가 출력되고,

blur 될 때 p 태그에 이벤트 타입인 blur가 출력된다.

 

 

3. 이벤트 제거

---

<input type="text" id="text" />
<input type="button" id="remove" value="remove button" />
<p id="sjh"></p>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    var f = function(e){
        $('#sjh').html(e.type + Math.random());
    }
    $('#text').on('focus blur', f);
    $('#text').on('focus', function(e){
        console.log('focus');
    })
    
    $('#remove').on('click', function(e){
        $('#text').off('focus');
    })
</script>

위와 같은 코드가 있다.

 

다른 내용은 계속 다뤄왔던 예제이므로 설명은 넘기고,

remove 엘리먼트에 대한 jquery를 봐본다.

remove 라는 id를 가진 엘리먼트에 대해 click 이벤트가 발생 시 정의된 함수가 실행된다.

그 함수는 text라는 id를 가진 text input 태그에 대해서 focus 이벤트 발생시 동작되는 이벤트핸들러를 off 시킨다.

 

input 텍스트 태그에 focus를 하면 focus와 random math가 같이 출력되며 console창에도 focus가 출력됨을 확인할 수 있다.

 

blur 이벤트 발생시에도 마찬가지이다.

 

그 다음 remove button을 클릭한 후 input 태그에 focus를 한 모습이다.

focus 동작 시에 발생되는 이벤트 핸들러가 동작하지 않음을 알 수 있다.