[JS/javascript] addEventListener 애드이벤트리스너 !

자바스크립트의 onclick방식 알고 있습니까?

예를 들어

 

<div class="content">
    <button id="Btn" class="blue-btn" onclick="버튼()">alert이다잇!</button>
  </div>
  <script>
    function 버튼() {
      alert('hello 쪽팔리게잇!')
    }
  </script>

이렇게 onclick 버튼()을 function 버튼으로 만들어

alert창을 띄웠죠

 

onclick은 버튼을 누르면~~ 이런 뜻이 됩니다 onclick 말고도 있지만 

요즘 이런방식에서

addEventListener방식을 많이 사용한다고 하죠

 

사용방법부터 알아보죠

 

문법

<script>
    document.getElementById('Btn').addEventListener('click',function(){
      // 코드를 입력하세요~
    });
  </script>

이렇게 생겼숨다

대충 아시겠죠

addEventListener() 괄호 안에 click클릭을 function란 기능을 넣어서

{

어디에 실행할 건지 코드를 적어주면 되는것입죠

}

 

해볼까요?

<script>
    document.getElementById('Btn').addEventListener('click',function(){
      alert('마! 이벤트리스너다!')
    });
  </script>

 

간편합니다

 

굳이 onclick을 html태그에 붙이고 그걸 다시 자바스크립트로 짤 필요 없이 자바스크립트 안에 다 해결이 가능한것입죠

 

당연히 jQuery 문법으로 변경도 가능하겠죠

<script>
    $('#Btn').on('click', function(){
      alert('마! 이벤트리스너다!')
    });
  </script>

jquery에서는 on 말고도 다양한 명령어가 있으니 찾아보세요