웹브라우저 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. tachyon
    감사합니다!
  2. JustStudy
    2016.07.12 화
    고맙습니다 3.
  3. JustStudy
    2016.07.02 토
    고맙습니다 2.
  4. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  5. 이주환
    2016. 04. 28
    잘보고 갑니다~!
    이벤트 추가에있어서 중요한 내용이지요.
  6. JustStudy
    고맙습니다
  7. WayneKing
    웹을 공부할 수록 자바부터 보고 공부해야 한다고 생각되네요.
  8. 안광현
    왜 리스너라는 명명이 붙었는지 궁금했는데 그런 뜻이!
  9. 박고잉
    신호가 있을 때까지 대기하는 것을 말합니다. 자스에서는 그게 이벤트가 되겠군요. 즉 프로그램이 마우스클릭을 기다리는거죠.
    답변을 기다리는 굿님도 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
            정의하신 함수를 웹브라우저가 호출하면서 첫번째 입력값으로 에벤트 객체를 전달해주도록 약속 되어있기 때문이예요.
            대화보기
            • quki
              이고잉님 질문있습니다.
              문법적인 의문인데요..

              t.addEventListener('click', function(event){
              alert('Hello world, '+event.target.value);
              });

              에서 function(event){ } 부분이요, 이부분이 익명함수인것으로 아는데 함수의 input인자로 event가 들어가있잖습니까
              근데 지역에서 event를 사용하는데 아무런 정의 없이, 즉, 막연한 객체를 사용하는 것인데..
              event.target.value와 같이 사용이 어떻게 가능한 것인가요? 문법적인 부분이 이해가가질 않습니다.
            • bornteller@gamil.com
              아 그렇군요! 감사합니다.
              대화보기
              • egoing
                오타라기 보다 ie8에서는 지원하지 않는 방식이라서 그렇습니다. 결과적으로 말씀 드리면 우리가 직접 호환성 문제를 처리하는 경우는 별로 없고 라이브러리에 의존하기 때문에 제가 수업에서 호환성에 대한 부분은 개념적인 설명만을 드리고 엄격하게 예제를 만들지는 않고 있습니다.
                대화보기
                • Jang Hui JO
                  아 그렇군요.
                  답변 갑사합니다!
                  그럼 2번째 예제는 오타인건가요?
                  대화보기
                  • egoing
                    이 역시 호환성 문제죠~
                    대화보기
                    • Jang Hui JO
                      ie8이하 에서는 호환이 되지 않아 크로스브라우징을 해주는 코드 중
                      else if(t.attachEvent){
                      t.attachEvent('onclick', function(event){
                      alert('Hello world, '+event.target.value);
                      })

                      이렇게 입력하면 실행이 되지 않고 +event.target.value -> +target.value로 입력해야 ie8에서 실행이 됩니다.

                      강의는 항상 즐겁게 보고 있습니다.^^
                    • 환글
                      이렇게 이벤트가 동작하는군요^^
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기