웹브라우저 JavaScript

jQuery 이벤트

jQuery는 이벤트와 관련해서 편리한 기능을 제공한다.  아래 예제는 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용하는 것의 차이점을 보여준다. (실행)

<input type="button" id="pure" value="pure" />
<input type="button" id="jquery" value="jQuery" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    // 순수하게 구현했을 때
	var target = document.getElementById('pure');
	if(target.addEventListener){
		target.addEventListener('click', function(event){
			alert('pure');
		});
	} else {
		target.attachEvent('onclick', function(event){
			alert('pure');
		});
	}

    // jQuery를 사용했을 때
	$('#jquery').on('click', function(event){
		alert('jQuery');
	})
</script>

코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. 이런 이유 때문에 jQuery와 같은 라이브러리를 사용하는 것이다. 

댓글

댓글 본문
작성자
비밀번호
  1. tachyon
    감사합니다
  2. JustStudy
    2016.07.14 목
    고맙습니다 3.
  3. JustStudy
    2016.07.03 일
    고맙습니다 2.
  4. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  5. 이주환
    2016. 04. 28
    잘보고갑니다.
  6. JustStudy
    고맙습니다
  7. WayneKing
    코딩시간 엄청 줄어들것 같네요.
  8. 2015-11-13 금요일 비옴....
    잘 봤습니다.
    저녁 시간에는 동영상이 끊기고 느려지는데 접속자가 많아서 그런거겠죠?
    ....
  9. 호두과자
    감사합니당~
  10. 코딩!
    감사합니다!
  11. egoing
    방금 처리했습니다. 알려주셔서 감사합니다!
    대화보기
    • FOrcePlane
      항상 좋은 수업 덕분에 너무 감사드립니다!
      그런데 youtube로 연속해서 보고 있는데, 이벤트 부분하고 ajax, JSON부분하고 강의 순서가 엉켜있습니다.
      이게 수정이 가능한지는 모르겠네요 ㅎㅎ

      아무튼 항상 좋은 수업보고 있습니다. 감사드립니다!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기