07.22(이벤트)

이벤트(event)란?

 

웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행함

따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 함

 

 

이벤트핸들러 함수 바인딩

 

on이벤트 속성에서 함수 실행(계속해오던 방식) 

스크립트태그 내에서 요소에 on이벤트 속성 지정

addEventListener(이벤트명, 콜백함수)

 

 

이벤트 객체

 

이벤트 발생시 관련 정보를 가진 객체, 이벤트핸들러 함수의 첫 번째 인자로 전달

 

 

이벤트 발생 객체

 

이벤트객체.target 속성값

이벤트 핸들러 함수안에서 this 키워드로 접근

이벤트 함수 안에서는 this가 window가리키지 않고 이벤트 발생객체 가리킴

 

 

이벤트 버블링

 

자식노드에서 발생한 이벤트는 부모노드로 자동 전달됨

<!-- div.div-test.div1[onclick] -->
<div class="div-test div1" onclick="test1('1번', event);">
    <div class="div-test div2" onclick="test1('2번', event);">
        <div class="div-test div3" onclick="test1('3번', event);">
        </div>    
    </div>
</div>
<script>
function test1(tag, e){
    alert(tag);

    //버블링 제한
    e.stopPropagation();
}