이벤트

1. 이벤트란?

• 특정한 상황이 발생했을 때 호출되도록 사용자가 정의하는 함수들
• 특정한 상황, 특정한 동작

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

2. this

• 이벤트가 발생한 대상을 필요로 하는 경우 this 를 통해서 참조할 수 있다.

<script>
  <input type="button" value="button2" id="target2"
onclick="alert('Hello World ' + this.value)">
</script>

3. 프로퍼티 리스너

• 프로퍼티리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.

4. 이벤트 객체

• 이벤트가 실행된 맥락의 정보가 필요한 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 떄 이벤트 핸들러의 인자로 전달된다.

<script>
let t = document.getElementById("btn");
t.onclick = function (event) {
      // alert("Hello world" + event.target.value);
            console.dir(event);
}
</script>

5. addEventListener()

• 이벤트를 등록하는 가장 권장되는 방식이다.

<script>
let t = document.getElementById("target");
t.addEventListener('click',function(event){
	alert("Hello Wolrd " + event.target.value);
});
</script>