.addEventListener / .on / jQuery 이용시 알면 좋은것들 / click / dblclick / input / change

 

 

저번 글에 이어서 이번에는 jQuery 이용시 알면 좋은 것들에 대해 살펴볼 예정인데,

일단 그전에 addEventListener 라는 것에 대해서 언급후 살펴보자.

 

 

 

addEventListener

 

이런 코드를 본적이 있을거당.        

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){})

 

한눈에 봐도 굉장히 길고 복잡해 보이는데, 사실 이거 저번에 봣던거에서

.addEventListener('click', function(){})이거만 추가된거다. 

 

해석하자면

className이 'navbar-toggler'인데 처음으로 나온 걔 있잖아.

그거 클릭 이벤트가 일어나면 이 함수 실행시켜줘. 

 

한마디로 말하면

.addEventListener('어떤이벤트', function( ){ } ) 는 어떤이벤트가 일어났을때~~~  함수 요거 실행해조!! 

라는 말이다. 사실 별거 없다. 보기만 무시무시해 보일뿐 ㅋㅋㅋ

 

 

 

 

 

jQuery의 사용법들 (querySelector 을 사용했을 때와의 비교)

 

 1.  html 내용 바꾸기   

            //<p class = "hello">안녕</p>

 

            // <script_>

            //     document.querySelector('.hello').innerHTML = '바보';

            //     $('.hello').html('바보1');

 

            // 만약 안녕 이라는 글자가 3개나 있는데, 그 3개다 바꾸려면,

            // document.querySelectorAll('.hello')[0].innerHTML = '바보';

            // document.querySelectorAll('.hello')[1].innerHTML = '바보';

            // document.querySelectorAll('.hello')[2].innerHTML = '바보';

 

            // 이렇게 해야함. 근데 jQuery를 이용하면 그냥 써도 3개 다 해당함.

            //     $('.hello').html('바보1');

 

 

 

2.  css style 바꾸기.

            //     document.querySelector('.hello').style.color = 'red';

            //     $('.hello').css('color', 'red');

 

 

3.  class를 탈부착 하기 -- 이 기능을 통해서 미리 디자인 해둔 class 이름을을 붙이기만 해서 디자인을 확 바꿀수 있다.

 이 방법을 사용함으로, 효과/ 애니메이션 추가가 쉬워지고, 재사용이 용이해 진다.

<!--같은 곳에 두개의 class이름을 붙여준 후, 서로 상반되는 css스타일을 넣어주면,

css sheet에서 아래에 있는 스타일이 우선순위를 가지게 된다. -->

            //     document.querySelector('.hello').classList.add = 'hi';

            //     $('.hello').addClass('hi');

            // 제거는 .removeClass()

            // 토글은 .toggleClass()  

           .toggleClass( ) 이게 뭐냐면 붙어있으면 떼주고, 떼어져 있으면 붙여주는 아주 똑똑한 친구임.

 

 

 

 

4. 이벤트가 일어났을때 함수를 실행시키기.   .addEventListener(' ', function( ) { } ) 대신  .on ( ' ', function( ) { }  )

이벤트란 ? 

유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이걸 전문용어로 이벤트라고 부릅니다

 

 

            // document.querySelector('#test-btn').addEventListener('click', function(){});

 

            // $('#test-btn').on('click', function(){

                // $('.hello')[0].css.('display', 'none');

                // document.querySelectorAll('.hello')[1].style.display = 'none';

            // })

            

            // 자 근데 style.display = 'none'을 .hide 로도 표현이 가능함

            // (거의 유사. 그렇지만  UI용 애니메이션을 잘 먹게 하려면 .hide 쓰는걸 추천) 

 

            // $('#test-btn').on('click', function(){

            //     $('.hello').hide()

 

 

 

 

5. 추가로 .on(' ', function( ){}) 이 '' 안에 들어가는게 정말 많지만, 자주 쓰이는 것만 추려본다.

click / dblclick / input / change

 

1. $('#test-btn').on('click', function(){ }

     클릭하는 이벤트가 발생하면 옆에 함수 실행한다.

 

2.  $('#test-btn').on('dblclick', function(){ }

     더블클릭하는 이벤트가 발생하면 옆에 함수 실행한다.

     주의할 점은 dbclick 이 아니라 dblclick 이다.

 

3. $('#test-btn').on('input', function(){ }

     input 태그 안에가 뭔가가 변할때마다 그 순간마다 이 이벤트가 발생함.

 

4. $('#test-btn').on('change', function(){ }

     input이랑 유사한게 change 이벤트.    
     다른 점은 값이 변경되고 나서 다른데에 커서를 찍을때. 그러니까 포커스를 잃을때 이 이벤트가 발생함.