이벤트(사건을 의미)

브라우저에서 사건이란 사용자가 마우스 버튼을 클릭했을 때, 스크롤 했을 때, 필디의 내용을 바꿨을 때 등을 의미

event targert : 이벤트가 발생하는 대상

event type : onclick, onchange ‘때’ 의 의미

event handler : 이벤트가 발생했을 때 동작하는 코드

등록방법

 -inline

태그 안에 이벤트가 속성으로 들어가는 방식, this는 함수가 속한 객체를 의미

<!--자기 자신을 참조하는 불편한 방법-->

<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />

<!--this를 통해서 간편하게 참조할 수 있다, this는 input엘리먼트를 의미-->

<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

편리하지만 태그에 직접 기술됨, html이 기본적으로 추구하는 방향은 css와 script코드를 따로 분류하는 형태, 복잡한 코드를 넣을 수 없음

 -프로퍼티리스너

이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식

-addEventListener()

<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>

프로퍼티 이벤트로 사용시 1개의 핸들러만 사용가능하지만 add이벤트리스너는 추가합니다.

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

이벤트 전파(버블링 bubbling과 캡처링 capturing)

캡처링

버블링, 이벤트 전파에 주로 사용

stopPropagation()

기본동작의 취소

*텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.

*폼에서 submit 버튼을 누르면 데이터가 전송된다.

*a 태그를 클릭하면 href 속성의 URL로 이동한다.

기본적인 동작을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해 동작을 취소할 수 있습니다.

 -inline방식

　

    prevent event on


    opentutorials


    

            
    

　　　

 -property방식

 -addEventListener방식

출처 : 생활코딩 강의