Guide: Event Handling

Question 1

What are the ways you can handle when a v-on is triggered from a DOM event?

Answer 1

1. Running inline Javascript
   
   • <button v-on:click="counter += 1">Add 1</button>
2. Using the name of a method, with the native DOM event being the only argument
   
   • <button>Increase</button>
   • counter(event) {...
3. Invoking a method inline, using the special variable, $event, as needed to pass the native DOM event
   
   • <button>Delete</button>

Question 2

What is the syntax description of an event modifier?

Answer 2

A directive postfix denoted by a dot.

Question 3

What is the point of using event modifiers for v-on?

Answer 3

So that we can leave purely data logic in the methods rather than having to deal with DOM event details.

Question 4

Name 5 event modifiers for v-on.

Answer 4

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

Question 5

Describe the difference between:

v-on:click.prevent.self and

v-on:click.self.prevent

Answer 5

• v-on:click.prevent.self
  
  • This will prevent all clicks
• v-on:click.self.prevent
  
  • This will only prevent clicks on the element itself

Question 6

How do you ensure a click handler will be triggered at most one time? And what’s special about it?

Answer 6

v-on:click.once="handler"

It can also be used on component events.

Question 7

How can we improve mobile performance with scrolling if there’s a scroll handler?

What’s an important thing to remember?

Answer 7

Use v-on:scroll.passive="scrollHandler", which is telling the browser to not wait for the scrollHandler to complete, and instead beginning the behavior immediately.

This is in essence saying, there’s no preventDefault() in the method, so go ahead and do the default behavior.

Don’t use .prevent with .passive because using .passive is inheritanly saying that we’re not going to prevent the default behavior.

Question 8

What is the full list of key modifier aliases that can be used when v-on is listening for keyboard events?

Answer 8

• .enter
• .tab
• .delete (captures both “Delete” and “Backspace”)
• .esc
• .space
• .up
• .down
• .left
• .right

Question 9

Do you have to resort to a using a keyCode if there’s no alias for it?

Answer 9

No, you can define custom key modifier aliases via the global config.keyCodes object

Vue.config.keyCodes.f1 = 112

Question 10

What are automatic key modifiers?

Answer 10

They are the valid key names exposed via KeyboardEvent.key but converted to kebab-case.

<input>

This would only work if $event.key === 'PageDown'

Question 11

What are system modifiers, list all of them, and what’s an important rule about them?

Answer 11

They enable keyboard of mouse event listeners to be triggered only when the specified modifier key is pressed.

• .ctrl
• .alt
• .shift
• .meta

An importnat rule is that keyup.ctrl will only trigger if you release some other key while holding down ctrl. It won’t trigger by releasing ctrl alone! To do that, use the keyCode for ctrl: keyup.17

Question 12

What does exact do?

Describe what each one does:

• `<button>A</button>
• <button>A</button>
• <button>A</button>

Answer 12

It allows control over the exact combination of system modifiers needed to trigger an event.

• Will trigger on control-clicking, but will still trigger if some other modifier like shift is also pressed
• Will trigger if the only system modifier pressed is Control while clicking
• Will trigger if no system modifier is pressed when clicking

Question 13

What are the mouse button modifiers?

Answer 13

.left

.right

.middle

Question 14

What are three advantages to having listeners in HTML?

Answer 14

1. It’s easier to locate handler functions by skimming the HTML template for it’s definition
2. Since there’s no manual attaching event listeners in JS, the ViewModel code can be pure logic and DOM-free. Much easier to test.
3. When a ViewModel is destroyed, all event listeners are automatically removed.