생활코딩

Coding Everybody

코스 전체목록

닫기

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. 헤밍웨이
    220825 감사합니다!
  2. 임앤강
    2022-02-17 감사합니다.
  3. 드림보이
    2022.01.04. jQuery 이벤트 파트 수강완료
  4. pmxsg
    2021.12.23. 수강
  5. labis98
    20210914 좋은 강의 감사합니다.
  6. anne
    완료
  7. 한강
    jQuery가 더 편이하네요~~!!!
    200714
  8. 준바이
    감사합니다
  9. 굼벵이
    완료
  10. JuicyFresh
    감사합니다.
  11. 박인호
    1-3
    수강완료.
    jQuery는 크로스브라우징 이슈를 간단하게 커버할 수 있다.
  12. Byungsoo Kim
    감사합니다. >>>
  13. illliilllliillliii
    -ㅁ-!! 하나의 예제이긴하지만 jQuery를 배우지 않는 것은 엄청난 손해로군요
    잘봤습니다
  14. crable
    감사합니다.
  15. Bamdle
    감사합니다 ^^
  16. Byeong Heon Lee
    항상 감사합니다~
  17. 신입1
    감사합니다
  18. tachyon
    감사합니다
  19. JustStudy
    2016.07.14 목
    고맙습니다 3.
  20. JustStudy
    2016.07.03 일
    고맙습니다 2.
  21. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  22. 이주환
    2016. 04. 28
    잘보고갑니다.
  23. JustStudy
    고맙습니다
  24. WayneKing
    코딩시간 엄청 줄어들것 같네요.
  25. 2015-11-13 금요일 비옴....
    잘 봤습니다.
    저녁 시간에는 동영상이 끊기고 느려지는데 접속자가 많아서 그런거겠죠?
    ....
  26. 호두과자
    감사합니당~
  27. 코딩!
    감사합니다!
  28. egoing
    방금 처리했습니다. 알려주셔서 감사합니다!
    대화보기
    • FOrcePlane
      항상 좋은 수업 덕분에 너무 감사드립니다!
      그런데 youtube로 연속해서 보고 있는데, 이벤트 부분하고 ajax, JSON부분하고 강의 순서가 엉켜있습니다.
      이게 수정이 가능한지는 모르겠네요 ㅎㅎ

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