웹브라우저 JavaScript

addEventListener()

addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
	t.addEventListener('click', function(event){
		alert('Hello world, '+event.target.value);
	});
</script>

이 방식은 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent 메소드를 사용해야 한다. 

var t = document.getElementById('target');
if(t.addEventListener){
	t.addEventListener('click', function(event){
		alert('Hello world, '+event.target.value);
	});	
} else if(t.attachEvent){
	t.attachEvent('onclick', function(event){
		alert('Hello world, '+event.target.value);
	})
}

이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다. 

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
	t.addEventListener('click', function(event){
		alert(1);
	});
	t.addEventListener('click', function(event){
		alert(2);
	});
</script>

이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다. 

<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
    var t1 = document.getElementById('target1');
	var t2 = document.getElementById('target2');
	function btn_listener(event){
		switch(event.target.id){
			case 'target1':
				alert(1);
				break;
			case 'target2':
				alert(2);
				break;
		}
	}
	t1.addEventListener('click', btn_listener);
	t2.addEventListener('click', btn_listener);
</script>

 

댓글

댓글 본문
  1. 헤밍웨이
    220825 감사합니다.
  2. 임앤강
    2022-02-14 감사합니다.
  3. 드림보이
    2021.12.29. 이벤트 - 등록방법 - addEventListener() 파트 수강완료
  4. pmxsg
    2021.12.23. 수강
  5. labis98
    20210912 좋은 강의 감사합니다.
  6. event.target = '이벤트를 작동시킨 객체' / 대상객체.addEventListener('이벤트명', fuction 함수명(event){}) = '이벤트만들기'
  7. 박병진
    2020.12.10 완료
  8. 싸알
    완료
  9. 싸알
    완료
  10. anne
    완료
  11. 정승옥
    완료
  12. 한강
    고급기술 배운 느낌이네요~~^^!
    addEventListener() 감사합니다~~
    200709
  13. Joo.Love.
    코드 재활용에 아주 유익할 것 같습니다, 감사합니다.
  14. Gritter
    감사합니다.
  15. 굼벵이
    완료
  16. 정홍
    완료
  17. psykid
    수업 굉장히 잘 듣고있습니다. 좋은 강의 감사합니다.
    근데 그. 2분 51초쯤 예제에서
    ie8 이하에서는 attachEvent 메소드를 사용한다고 하셨는데

    그 alert창에 target value를
    alert(event.target.value)가 아니라
    alert(event.srcElement.value)가 되야 하는거 같습니다.
  18. JuicyFresh
    감사합니다.
  19. 김수
    20180901 ...감사합니다 ㅠㅠ너무어려옹ㅇ
  20. 안병희
    addEventListener에 대해 공부하다 궁금한 점이 생겼는데요.
    어떤 버튼에 대한 event handler를 html에서 onclick 어트리뷰트로 등록할 때는 handler 내부가 this가 window 객체를 가리키는데,
    같은 handler를 addEventListener로 등록하면 this가 button 객체를 가리킵니다.
    두 경우가 왜 다른지 알고 싶습니다.
  21. 생선과고양이
    20180430 감사합니다
  22. Daisy, Lee
    설명 감사합니다 :)
    대화보기
    • 방파제
      하나의 이벤트 대상에 복수의 동일 이벤트리스너가 가능하다고하셨는데
      복수의 동일하지 않은 이벤트 리스너도 가능한가요? click,click아닌다른 이벤트 이런식으로요
    • 박인호
      12-30
      수강완료.
      이벤트 핸들러가 제일 보편적으로 사용되는 방식인 만큼 장점도 많네요.
    • 개발자가 되고싶은 고등학생
      좋아좋아~
    • Byungsoo Kim
      감사합니다.
    • JaeMin Choi
      addEventListerner() 부분에 대한 이해가 필요해서, 이고잉님의 웹브라우저 javascript 강의를 며칠간 정주행해서 여기까지 왔네요.
      개념잡는데 도움이 많이 되고 있습니다. 감사합니다.
    • crable
      강동엽
    • 신입1
      감사합니다
    • 괜찮아
      답변 감사합니다!

      t1.addEventListener('click', btn_listener())
      이렇게 입력하면 btn_listener 함수를 실행한 리턴값이 적용되는군요. 몰랐어요^^
      대화보기
      • ㅇㅇ
        아 오타가있네요 2번째줄 처음 btn_listener 을 btn_listener()으로 고쳐생각해주세요.
      • ㅇㅇ
        btn_listener 은 함수객체 자체 입니다.
        btn_listener 과 같이 입력할경우 자바스크립트에서는 함수객체를 실행시킨다는 의미로 해석해 그 return 값을 적용하므로, btn_litener 과같이 이름을명시하는 것이 올바른표현입니다.
        대화보기
        • 괜찮아
          16번줄 코드에서 t1.addEventListener('click', btn_listener)
          btn_listener() 가 아닌 btn_listener 가 입력된 이유는 뭘까요?
        • 늘생릭코네
          잘보았습니다.
          고맙습니다.
        • tachyon
          감사합니다!
        • JustStudy
          2016.07.12 화
          고맙습니다 3.
        • JustStudy
          2016.07.02 토
          고맙습니다 2.
        • 온달장군
          강좌 잘보고 갑니다. 감사합니다.
        • 이주환
          2016. 04. 28
          잘보고 갑니다~!
          이벤트 추가에있어서 중요한 내용이지요.
        • JustStudy
          고맙습니다
        • WayneKing
          웹을 공부할 수록 자바부터 보고 공부해야 한다고 생각되네요.
        • 안광현
          왜 리스너라는 명명이 붙었는지 궁금했는데 그런 뜻이!
        • 박고잉
          신호가 있을 때까지 대기하는 것을 말합니다. 자스에서는 그게 이벤트가 되겠군요. 즉 프로그램이 마우스클릭을 기다리는거죠.
          답변을 기다리는 굿님도 Listener라고 볼수도 있겠네요.
          대화보기
          • 2015-11-13
            13일의 금요일에 질문 올립니다 ㅡㅡ으흐흐흫
            Listener가 뭔가요?
            질문의 질을 떨어뜨려 죄송합니다 >.<
          • 코딩!
            대세는 addEventListener 이군요!
          • quki
            아하 ! 정말 감사합니다 !
            kirrie님의 친절한 설명덕분에 완전히 이해가 되네요!
            감사합니당^^
            대화보기
            • kirrie
              javascript에서 함수(Function)는 객체입니다. (https://developer.mozilla.org......ipt 이 링크를 참조하시면 좋을 것 같네요.)
              이 말인 즉슨, 함수는 하나의 값으로 취급될 수 있다는 의미입니다.

              위 예제에서는 함수 btn_listener를 다음과 같이 선언하고 있습니다.

              function btn_listener(event) {...

              이것을 바꿔서 기술하자면 다음과 같이 됩니다.

              var btn_listener = function(event) {...

              이를 가지고 설명하자면,
              addEventListener는 두번째 인자로 함수 객체를 받아야 하는데
              btn_listener()를 두번째 인자로 지정하면 btn_listener라는 함수의 실행 결과를 인자로 넘기는 셈이 되는 것이고
              btn_listener를 인자로 지정하면 함수 객체를 그대로 넘기는 셈이 되는 것이기 때문에
              btn_listener를 넘겨야 합니다.
              대화보기
              • quki
                질문있습니다 ^^
                t1.addEventListener('click', btn_listener); 에서 두번째 인자로 btn_listener가 오잖습니까?
                근데 함수가 btn_listener()가 아니라 괄호가 빠진 btn_listener이 왜 오는 것인지 궁금합니다.
                btn_listener()를 두번째 인자로 주었더니 버튼을 누르기도 전에 화면을 로드하자마자 함수가 호출되네요.
                다시 말씀드리자면, btn_listener()와 btn_listener 의 차이가 궁금합니다. 저는 두개다 같은 의미로서 '함수' 라고 생각을 했는데 엄연한 차이를 보이니 당혹스럽네요..

                어떤 이유인지 궁금합니다 ^^
              • will
                으음.... 에드이벤트리스너 메소드명이 너무 기르다...
              • quki
                아하 그렇군요! 감사합니다!

                즉, addEventListener의 두번째 인자값에는 handler를 처리해주는 함수가 들어가는 것이고,
                해당 'handler 함수의 인자값에 event객체를 전달한다' 라고 약속이 되어있는 것이군요!

                이고잉님 감사합니다.!
                대화보기
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기