[JavaScript] 이벤트

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.

 

---

1.이벤트

사용자와 웹페이지가 상호작용하도록 해주는것

 

1-1.이벤트 종류

https://developer.mozilla.org/en-US/docs/Web/Events

 

 

 

1-2.인라인 이벤트 핸들러

오래된 방식
this는 전역 객체 window

<button onclick="bu1()">버튼</button>

<script>
    function bu1(){alert("안녕?");}
</script>

 

 

 

1-3.이벤트 핸들러 프로퍼티 방식

this는 이벤트에 바인딩된 요소를 가리킨다

<button class="newbtn1">버튼2</button>

<script>
    const btn=document.querySelector('.newbtn1');
    btn.onclick=function(){alert("안녕하세요?")}
</script>

 

 

 

 

 

1-4.addEventListener 메소드

DOM 요소에 이벤트, 해당 이벤트의 콜백함수를 지정한다.
(this 는 이벤트 리스너에 바인딩된 요소를 나타낸다.)

<button class="newbtn2">버튼3</button>
<script>
    const btn2=document.querySelector('.newbtn2')
    btn2.addEventListener('click',function(){alert("안녕하세요")})
</script>

 

 

 

 

 

2.이벤트 객체

이벤트 객체는 동적으로 생성되며 이벤트 핸들러에 인자로 전달된다.

 

<button class="newbtn3">버튼4</button>

<script>
    function hide(e){//e는 이벤트 객체다.
        e.target.style.visibility='hidden';//e.target 대신 this를 사용할수도있다.
        //this.style.visibility='hidden';
    }

    document.getElementsByClassName('.newbtn3').addEventListener('click',hide);
</script>

 

 

 

 

3.이벤트 프로퍼티

3-1.Event.target

실제 이벤트를 발생시킨 요소 (div 또는 버튼)
currentTarget 하고 target이 같으면 event.target=  this 다

 

3-2.Event.currentTarget

이벤트에 바인딘된 DOM요소(this)

 

 

 

 

3-3.Event.type

발생한 이벤트 종류(문자열 반환)

 

 

 

3-4.Event.cancelable

요소의 동작을 취소시킬수있는 여부

 

 

 

3-5.Event.eventPhase

이벤트 흐름상 단계

 

 

 

 

4.기본동작 변경

4-1.preventDefault()

요소가 가지고 있는 기본 동작을 중단시키기 위한 메소드

 

 

 

4-2.stopPropagation

부모 요소로 이벤트가 전파되는 것을 중단시키기 위한 메소드

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/js-event