You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<divclass="vueschool"><ahref="https://vueschool.io/lessons/vuejs-user-events?friend=vuejs"target="_blank"rel="sponsored noopener"title="Learn how to handle events on Vue School">Learn how to handle events in a free Vue School lesson</a></div>
3
+
<divclass="vueschool"><ahref="https://vueschool.io/lessons/vuejs-user-events?friend=vuejs"target="_blank"rel="sponsored noopener"title="Learn how to handle events on Vue School">イベントハンドリングする方法を Vue School の無料レッスンで学ぶ</a></div>
4
4
5
-
## Listening to Events
5
+
## イベントの購読
6
6
7
-
We can use the `v-on`directive, which we typically shorten to the `@`symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="methodName"`or with the shortcut, `@click="methodName"`
The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the `v-on`attribute isn't feasible. That's why `v-on`can also accept the name of a method you'd like to call.
Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event`variable:
109
+
時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な `$event`変数を使うことでメソッドに DOM イベントを渡すことができます:
110
110
111
111
```html
112
112
<button@click="warn('Form cannot be submitted yet.', $event)">
@@ -118,7 +118,7 @@ Sometimes we also need to access the original DOM event in an inline statement h
118
118
// ...
119
119
methods: {
120
120
warn(message, event) {
121
-
//now we have access to the native event
121
+
//ネイティブイベントを参照しています
122
122
if (event) {
123
123
event.preventDefault()
124
124
}
@@ -127,12 +127,12 @@ methods: {
127
127
}
128
128
```
129
129
130
-
## Multiple Event Handlers
130
+
## 複数イベントハンドラ
131
131
132
-
You can have multiple methods in an event handler separated by a comma operator like this:
132
+
イベントハンドラ内ではカンマで区切ることで、複数のメソッドを設定することができます:
133
133
134
134
```html
135
-
<!--both one() and two() will execute on button click-->
135
+
<!--ボタンをクリックすると、one（）とtwo（）の両方が実行されます-->
136
136
<button@click="one($event), two($event)">
137
137
Submit
138
138
</button>
@@ -142,19 +142,19 @@ You can have multiple methods in an event handler separated by a comma operator
142
142
// ...
143
143
methods: {
144
144
one(event) {
145
-
//first handler logic...
145
+
//one($event)のハンドラーロジック
146
146
},
147
147
two(event) {
148
-
//second handler logic...
148
+
//two($event)のハンドラーロジック
149
149
}
150
150
}
151
151
```
152
152
153
-
## Event Modifiers
153
+
## イベント修飾子
154
154
155
-
It is a very common need to call `event.preventDefault()`or`event.stopPropagation()`inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
<!--only trigger handler if event.target is the element itself-->
184
-
<!--i.e. not from a child element-->
183
+
<!-- event.target が要素自身のときだけ、ハンドラが呼び出されます-->
184
+
<!--言い換えると子要素のときは呼び出されません-->
185
185
<div@click.self="doThat">...</div>
186
186
```
187
187
188
188
::: tip
189
-
Order matters when using modifiers because the relevant code is generated in the same order. Therefore using `@click.prevent.self`will prevent **all clicks** while `@click.self.prevent`will only prevent clicks on the element itself.
<!--the click event will be triggered at most once-->
193
+
<!--最大1回、クリックイベントはトリガされます-->
194
194
<a@click.once="doThis"></a>
195
195
```
196
196
197
-
Unlike the other modifiers, which are exclusive to native DOM events, the `.once`modifier can also be used on [component events](component-custom-events.html). If you haven't read about components yet, don't worry about this for now.
197
+
他の修飾子とは違って、ネイティブ DOM イベント専用ではありますが、`.once`修飾子を[コンポーネントイベント](component-custom-events.html)でも使用することができます。まだコンポーネントについて読んでいないなら、今は気にする必要はありません。
198
198
199
-
Vue also offers the `.passive` modifier, corresponding to [`addEventListener`'s`passive`option](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters).
The `.passive`modifier is especially useful for improving performance on mobile devices.
208
+
`.passive`修飾子は特にモバイルでのパフォーマンスを改善するのに有用です。
209
209
210
210
::: tip
211
-
Don't use `.passive`and`.prevent`together, because `.prevent` will be ignored and your browser will probably show you a warning. Remember, `.passive`communicates to the browser that you _don't_ want to prevent the event's default behavior.
When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for `v-on`or`@`when listening for key events:
You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)as modifiers by converting them to kebab-case.
On Macintosh keyboards, meta is the command key (⌘). On Windows keyboards, meta is the Windows key (⊞). On Sun Microsystems keyboards, meta is marked as a solid diamond (◆). On certain keyboards, specifically MIT and Lisp machine keyboards and successors, such as the Knight keyboard, space-cadet keyboard, meta is labeled “META”. On Symbolics keyboards, meta is labeled “META” or “Meta”.
Note that modifier keys are different from regular keys and when used with `keyup`events, they have to be pressed when the event is emitted. In other words, `keyup.ctrl`will only trigger if you release a key while holding down `ctrl`. It won't trigger if you release the `ctrl`key alone
<!--this will fire even if Alt or Shift is also pressed-->
277
+
<!--これは Ctrl に加えて Alt や Shift キーが押されていても発行されます-->
278
278
<button@click.ctrl="onClick">A</button>
279
279
280
-
<!--this will only fire when Ctrl and no other keys are pressed-->
280
+
<!--これは Ctrl キーが押され、他のキーが押されてないときだけ発行されます-->
281
281
<button@click.ctrl.exact="onCtrlClick">A</button>
282
282
283
-
<!--this will only fire when no system modifiers are pressed-->
283
+
<!--これは システム修飾子が押されてないときだけ発行されます-->
284
284
<button@click.exact="onClick">A</button>
285
285
```
286
286
287
-
### Mouse Button Modifiers
287
+
### マウスボタンの修飾子
288
288
289
289
-`.left`
290
290
-`.right`
291
291
-`.middle`
292
292
293
-
These modifiers restrict the handler to events triggered by a specific mouse button.
293
+
これらの修飾子は、イベントのトリガのハンドリングを、特定のマウスのボタンのみに制限します。
294
294
295
-
## Why Listeners in HTML?
295
+
## なぜ HTML にリスナを記述するのですか
296
296
297
-
You might be concerned that this whole event listening approach violates the good old rules about "separation of concerns". Rest assured - since all Vue handler functions and expressions are strictly bound to the ViewModel that's handling the current view, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`or`@`:
0 commit comments