B.TIL 08 : Event
12168 단어 TILJavaScriptvueJavaScript
키 이벤트
마우스 이벤트
HTML
<template>
<div class="kingdiv">
<div class="key-event">
<b>Key event</b><br />
<input
class="input-box"
type="text"
v-on:input="typing"
v-bind:value="message"
placeholder="input event"
@keyup="keycheck"
/>
<div class="text-box">{{ message }}<br />{{ keyeventBox }}</div>
</div>
<div class="mouse-event">
<b>Mouse event</b>
<div class="point-box" ref="pointbox" @mousemove="locationcheck"></div>
<div class="location-box">현재 X좌표 : {{ x }} Y좌표 : {{ y }}</div>
</div>
</div>
</template>
javascript
<script>
export default {
data() {
return {
message: "",
keyeventBox: [],
x: 0,
y: 0,
};
},
methods: {
typing: function (event) {
this.message = event.target.value;
},
keycheck: function () {
this.keyeventBox.push(event.keyCode);
if (event.keyCode === 8) {
this.keyeventBox.pop();
this.keyeventBox.splice(0, 1);
if (!this.message) {
this.keyeventBox = [];
}
}
},
locationcheck: function (e) {
this.x = e.pageX;
this.y = e.pageX;
},
},
};
</script>
Author And Source
이 문제에 관하여(B.TIL 08 : Event), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@keywookim/B.TIL-08-Event저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)