10장 이벤트 처리

1) event

<template>

    <div>

        <button @click="printEventInfo('Hello Vue3', $event)">

            inline event handler

        </button>

        <hr />

        <input type="text" @keyup="onKeyupHandler" />

    </div>

</template>

<script>

export default {

    setup() {

        const printEventInfo = (message, event) => {

            console.log('message: ', message);

            console.log('event.target: ', event.target);

            console.log('event.target.tagName: ', event.target.tagName);

        };

        const onKeyupHandler = event => {

            console.log('event.key: ', event.key);

        };

        return { printEventInfo, onKeyupHandler };

    },

};

</script>

<style lang="scss" scoped></style>

2) mouse

<template>

    <div>

        <div id="modifiers">

            <div @click="clickDiv">

                DIV 영역

                <p @click.self="clickP">

                    P 영역

                    <!-- <span @click.stop="clickSpan"> SPAN 영역 </span> -->

                    <span @click="clickSpan"> SPAN 영역 </span>

                    <a href="https://naver.com" @click.prevent.stop="clickA">a 영역</a>

                </p>

            </div>

        </div>

        <button @click.once="clickDiv">once</button>

    </div>

</template>

<script>

export default {

    setup() {

        const clickDiv = () => {

            console.log('clickDiv');

            // location.href = 'https://naver.com';

        };

        const clickP = () => {

            console.log('clickP');

        };

        const clickSpan = () => {

            console.log('clickSpan');

            // alert('좋아요');

        };

        const clickA = e => {

            // e.preventDefault();

            alert('어떤기능~');

        };

        return {

            clickDiv,

            clickP,

            clickSpan,

            clickA,

        };

    },

};

</script>

<style scoped>

#modifiers div,

#modifiers p,

#modifiers span {

    padding: 40px;

}

#modifiers div {

    background-color: #ccc;

}

#modifiers p {

    background-color: #999;

}

#modifiers span {

    background-color: #666;

    display: block;

}

</style>

3) keyboard

<template>

    <div>

        <input type="text" @keyup.ctrl.enter="addTodo" />

        <ul>

            <li v-for="(todo, index) in todos" :key="index">

                {{ todo }}

            </li>

        </ul>

    </div>

</template>

<script>

import { reactive } from 'vue';

export default {

    setup() {

        const todos = reactive([]);

        const addTodo = event => {

            todos.push(event.target.value);

            event.target.value = '';

            event.target.focus();

        };

        return { todos, addTodo };

    },

};

</script>

<style lang="scss" scoped></style>