작성
·
37
0
안녕하세요~
1번은 전달한 인자를 그대로 함수에서 받아서 의문이 안생기는데,
2번은 인자를 전달하지 않았는데, 함수에서는 event 인자를 받네요? event 인자는 자동으로 사용가능한 개념인지요?
답변 주시면 감사하겠습니다~
1.
전달 한 인자를 함수에서 그대로 받음
printEventInfo('text', $event)
printEventInfo(message, event)
2.
인자를 전달하지 않았는데 함수에서는
event를 인자로 받음
@keyup="onKeyupHandler"
onKeyupHandler(event)
on
<template>
<button @click="printEventInfo('text',$event)">inline event handler</button>
<input type="text" @keyup="onKeyupHandler"/>
</template>
<script>
export default{
const printEventInfo=(message, event)=>{
console.log(message)
console.log(event.target)
console.log(event.target.tagName)
}
const onKeyupHandler=(event)=>{
console.log(event.key)
}
}
</script>
답변 1
0
안녕하세요 질문에 답변 드리기 전에 해당 질문은 Vue 문법이기 전에 자바스크립트 함수 전달 및 호출 방식의 차이이기에 이점을 먼저 말씀드리고 설명하도록 하겠습니다.
자바스크립트의 함수 전달과 실행의 차이를 상세한 예제로 설명드리겠습니다.
1. 일반적인 함수 전달과 실행의 차이
// 1. 함수 정의
const greeting = (name) => console.log(`Hello ${name}`);
// 함수 직접 실행
greeting('John'); // 출력: Hello John
// 함수 전달의 예
const people = ['John', 'Jane', 'Mike'];
// forEach에 함수 자체를 전달
people.forEach(greeting); // 출력: Hello John, Hello Jane, Hello Mike
// 함수를 직접 실행하는 경우
people.forEach((name) => greeting(name)); // 위와 동일
2. 이벤트 핸들링에서의 실제 예제
// HTML
// <button id="btn1">직접 실행 버튼</button>
// <button id="btn2">함수 전달 버튼</button>
// <input id="input1" type="text">
// 1. 이벤트 핸들러 함수들
const printEventInfo = (message, event) => {
console.log('메시지:', message);
console.log('이벤트 타겟:', event.target);
console.log('태그이름:', event.target.tagName);
};
const onKeyupHandler = (event) => {
console.log('입력된 키:', event.key);
console.log('이벤트 타겟:', event.target);
};
// 2. 함수를 직접 실행하는 방식
const btn1 = document.querySelector('#btn1');
btn1.addEventListener('click', (event) => {
printEventInfo('버튼1 클릭됨', event);
});
// 3. 함수 자체를 전달하는 방식
const btn2 = document.querySelector('#btn2');
btn2.addEventListener('click', function(event) {
console.log('이벤트 객체 자동 전달됨:', event);
});
const input1 = document.querySelector('#input1');
input1.addEventListener('keyup', onKeyupHandler); // 이벤트 객체 자동 전달
3. 이것이 Vue에서는 이렇게 표현됩니다
<template>
<!-- 1. 함수 직접 실행 방식 -->
<button @click="printEventInfo('버튼1 클릭됨', $event)">직접 실행 버튼</button>
<!-- 2. 함수 전달 방식 -->
<button @click="onClickHandler">함수 전달 버튼</button>
<input @keyup="onKeyupHandler" type="text">
</template>
<script>
export default {
methods: {
printEventInfo(message, event) {
console.log('메시지:', message);
console.log('이벤트 타겟:', event.target);
console.log('태그이름:', event.target.tagName);
},
onClickHandler(event) { // 이벤트 객체 자동 전달
console.log('이벤트 객체 자동 전달됨:', event);
},
onKeyupHandler(event) { // 이벤트 객체 자동 전달
console.log('입력된 키:', event.key);
console.log('이벤트 타겟:', event.target);
}
}
}
</script>
이처럼 Vue의 이벤트 핸들링은 자바스크립트의 기본적인 함수 전달 방식을 그대로 따르고 있습니다:
함수를 직접 실행할 때는 필요한 인자를 모두 명시적으로 전달해야 합니다
함수 자체를 전달할 때는 브라우저가 이벤트 발생 시 자동으로 이벤트 객체를 첫 번째 인자로 전달합니다
이러한 개념은 자바스크립트의 기본 동작이며, Vue는 이를 더 편리한 문법으로 제공하는 것뿐입니다.