웹브라우저 자바스크립트 - addEventListener()

addEventListener() - https://opentutorials.org/course/1375/6761

---

<input type="button" id="target" value="button" />

<script>

    var t = document.getElementById('target');

    t.addEventListener('click', function(event){ //addEventListener의 첫번째인자는 이벤트 타입을 받는다. click이 발생하였을 때 두번째 인자인 함수를 실행한다.

        alert('Hello world, '+event.target.value);

    });

</script>

---

ie8이하버전은 attachEvent 메소드를 사용해야 한다. 아래 예제는 ie8이하에서도 사용가능한 코드이다.

---

var t = document.getElementById('target');

if(t.addEventListener){ //if문을 통해서 addEventListener가 사용가능한 브라우저에서는 이 코드가 사용된다.

    t.addEventListener('click', function(event){

        alert('Hello world, '+event.target.value);

    }); 

} else if(t.attachEvent){ //addEventListener가 사용불가능한 ie8이하 브라우저에서 이 코드가 사용한다.

    t.attachEvent('onclick', function(event){ //click이 아닌 onclick으로 작성해주며 나머지 부분은 동일하다.

        alert('Hello world, '+event.target.value);

    })

}

---

※ addEventListener의 장점은 동일한 이벤트들을 계속 등록이 가능하다. 이 부분은 inline, 프로퍼티 방식과 다른 점이다.

---

<input type="button" id="target1" value="button1" />

<input type="button" id="target2" value="button2" />

<script>

    var t1 = document.getElementById('target1'); //t1변수에 첫번째 버튼엘리먼트를 담는다.

    var t2 = document.getElementById('target2'); //t2변수에 두번째 버튼엘리먼트를 담는다.

    function btn_listener(event){ //btn_listener은 addEventListener로 사용할 함수

        switch(event.target.id){ //event.target.id를 통해서 html에 있는 id값을 가져올 수 있다.

            case 'target1':

                alert(1);

                break;

            case 'target2':

                alert(2);

                break;

        }

    }

    t1.addEventListener('click', btn_listener); //클릭을 하면 btn_listener이 실행된다. addEventListner을 계속 사용할 수 있다는 것을 확인 할 수 있다.

    t2.addEventListener('click', btn_listener); //클릭을 하면 btn_listener이 실행된다. addEventListner을 계속 사용할 수 있다는 것을 확인 할 수 있다.

</script>

---