[콜럼Vue스] 이벤트 객체

**이벤트 객체(Event Object)**는 브라우저에서 발생하는 이벤트에 대한 정보를 담고 있는 객체로, 이벤트가 발생할 때마다 자동으로 생성되어 이벤트 핸들러로 전달됨. 이를 통해 이벤트에 대한 다양한 정보를 얻을 수 있으며, 이벤트의 기본 동작을 제어하거나 이벤트의 전파를 멈추는 등의 작업을 할 수 있음.

 

---

1. 이벤트 객체가 포함하는 정보

이벤트 객체는 이벤트와 관련된 다양한 정보를 포함함. 여기에는 이벤트가 발생한 타겟 요소, 이벤트 유형, 이벤트가 발생한 위치(좌표), 사용된 키보드 키 등의 정보가 포함될 수 있음.

주요 속성:

• target: 이벤트가 발생한 HTML 요소.
• type: 발생한 이벤트의 종류 (예: 'click', 'keydown').
• clientX, clientY: 이벤트가 발생한 위치의 X, Y 좌표 (브라우저의 뷰포트 기준).
• key: 키보드 이벤트일 경우, 누른 키에 대한 정보.
• preventDefault(): 이벤트의 기본 동작을 막는 메서드 (예: 링크 클릭 시 페이지 이동 방지).
• stopPropagation(): 이벤트가 상위 요소로 전파되는 것을 막는 메서드.

---

2. 이벤트 객체 사용 예시

이벤트 객체는 이벤트 핸들러의 첫 번째 인자로 자동으로 전달되며, 핸들러에서 이를 통해 이벤트에 대한 정보를 처리할 수 있음.

<div id="app">
  <button @click="handleClick">Click me</button>
</div>

<script>
  var vm = Vue.createApp({
    methods: {
      handleClick(event) {
        console.log(event); // 이벤트 객체 출력
        console.log('클릭된 요소:', event.target); // 클릭된 요소 정보
      }
    }
  }).mount('#app');
</script>

 

• event.target: 클릭된 요소에 대한 정보를 출력함. 클릭된 <button> 태그를 가리킴.
• 이벤트 객체는 @click 디렉티브에서 발생한 이벤트에 대한 모든 정보를 담고 있음.

---

3. 이벤트 객체에서 이벤트 정보 활용

이벤트 객체를 사용하면 이벤트의 세부적인 동작을 제어할 수 있음. 다음은 이벤트 객체의 다양한 속성과 메서드를 사용하는 예시임.

<div id="app">
  <button @click="handleClick">Click me</button>
</div>

<script>
  var vm = Vue.createApp({
    methods: {
      handleClick(event) {
        console.log('클릭 위치:', event.clientX, event.clientY); // 클릭한 위치의 좌표
      }
    }
  }).mount('#app');
</script>

 

• clientX, clientY: 마우스를 클릭한 위치의 X, Y 좌표를 반환함.

기본 동작 막기 (preventDefault)

HTML <a> 태그의 기본 동작은 링크로 이동하는 것임. 이를 preventDefault() 메서드를 사용해 막을 수 있음.

<div id="app">
  <a href="https://www.example.com" @click="handleClick">Go to Example</a>
</div>

<script>
  var vm = Vue.createApp({
    methods: {
      handleClick(event) {
        event.preventDefault(); // 기본 동작(링크 이동) 방지
        alert('링크 이동이 막혔습니다.');
      }
    }
  }).mount('#app');
</script>

• event.preventDefault(): 링크의 기본 동작을 막아, 사용자가 클릭해도 페이지가 이동하지 않음.

 이벤트 전파 멈추기 (stopPropagation)

HTML 요소에 이벤트가 발생하면 이벤트가 부모 요소로 전파됨. 이를 **stopPropagation()**을 사용해 막을 수 있음.

<div id="app">
  <div @click="parentClick">부모 요소 클릭</div>
  <button @click.stop="childClick">자식 버튼 클릭</button>
</div>

<script>
  var vm = Vue.createApp({
    methods: {
      parentClick() {
        alert('부모 요소 클릭됨');
      },
      childClick() {
        alert('자식 요소 클릭됨');
      }
    }
  }).mount('#app');
</script>

 

• **@click.stop**은 **stopPropagation()**을 사용한 축약형으로, 자식 버튼 클릭 시 부모 요소로 이벤트가 전파되지 않도록 막음.
• **stopPropagation()**을 직접 사용하려면 @click="handleClick($event)" 형식으로 이벤트 객체를 명시적으로 전달하고, 메서드 내에서 처리할 수 있음.

---

4. 이벤트 객체를 이용한 키보드 이벤트 처리

키보드 입력을 처리할 때, 이벤트 객체는 사용자가 누른 키에 대한 정보를 제공함. keydown 또는 keyup 이벤트를 사용하여 특정 키를 감지할 수 있음.

키보드 이벤트 처리

<div id="app">
  <input @keydown="handleKeydown" placeholder="키를 눌러보세요">
</div>

<script>
  var vm = Vue.createApp({
    methods: {
      handleKeydown(event) {
        console.log('누른 키:', event.key); // 누른 키 출력
        if (event.key === 'Enter') {
          alert('Enter 키를 눌렀습니다.');
        }
      }
    }
  }).mount('#app');
</script>

 

 

• event.key: 사용자가 누른 키의 값을 반환함.
• Enter 키를 누르면 경고창이 뜸.

---

5. 이벤트 객체와 Vue에서의 사용

Vue.js에서는 이벤트 객체를 사용하는 경우, 이벤트 핸들러에서 **$event**를 통해 전달받을 수 있음. 자바스크립트의 일반 이벤트 처리 방식과 동일하지만, Vue에서는 더 간결하게 사용할 수 있도록 여러 이벤트 수정자를 제공함.

주요 이벤트 수정자:

• .stop: 이벤트 전파를 막음.
• .prevent: 기본 동작을 방지함.
• .self: 이벤트가 해당 요소에서만 트리거될 때 처리함.

---

이미지 출처 : 원쌤의 Vue.js 퀵스타트