이벤트 처리


디렉토리


이벤트 수신

v-on 지시문을 사용하여 DOM 이벤트를 수신하고 트리거될 때 일부 JavaScript 코드를 실행할 수 있습니다. v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

结果：

2.gif


事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

示例：

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

结果：

1.gif


内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

结果：

3.gif


有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}


事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()

예: 🎜
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
🎜결과: 🎜🎜 2.gif🎜🎜🎜🎜

🎜🎜이벤트 처리 방법🎜🎜🎜🎜🎜단, 많은 이벤트 처리 로직이 더 복잡해지므로 JavaScript 코드를 직접 작성하세요. < code>v-on 지시어에서는 불가능합니다. 따라서 v-on은 호출해야 하는 메서드의 이름도 받을 수 있습니다. 🎜🎜🎜예: 🎜
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
🎜결과: 🎜🎜1.gif🎜🎜🎜🎜

🎜🎜인라인 프로세서의 메서드🎜🎜🎜🎜🎜메서드에 직접 바인딩하는 것 외에도 JavaScript 문을 인라인할 수도 있습니다. 호출 메서드: 🎜
<input v-on:keyup.page-down="onPageDown">
<input v-on:keyup.13="submit">
🎜 결과: 🎜🎜 3.gif🎜🎜🎜🎜🎜 인라인 명령문 프로세서에서 원본 DOM 이벤트에 액세스해야 하는 경우도 있습니다. 특수 변수 $event를 사용하여 메서드에 전달할 수 있습니다. 🎜
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
🎜🎜🎜

🎜🎜Event modifier🎜🎜🎜🎜🎜이벤트 핸들러에서 호출 event.preventDefault() 또는 event.stopPropagation()은 매우 일반적인 요구 사항입니다. 이를 메서드에서 쉽게 구현할 수 있지만 DOM 이벤트 세부 정보를 처리하는 대신 순수한 데이터 논리를 사용하는 메서드를 사용하는 것이 더 좋습니다. 🎜

이 문제를 해결하기 위해 Vue.js는 v-on에 대한 이벤트 수정자를 제공합니다. 앞에서 언급했듯이 수정자는 점으로 시작하는 명령 접미사로 표시됩니다. v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

  • .stop

  • .prevent

  • .capture

  • .self

  • .once

  • .passive

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.1.4 新增

rrreee

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。

2.3.0 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

rrreee

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。


按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

rrreee

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

rrreee

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。


按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode

  • .stop

  • .prevent🎜
  • 🎜.capture🎜
  • 🎜.self🎜
  • 🎜. 한 번🎜
  • 🎜.passive🎜
rrreee
🎜수정자를 사용할 때 해당 코드의 순서가 중요합니다. 같은 순서로 생성됩니다. 따라서 v-on:click.prevent.self를 사용하면 모든 클릭을 방지하는 반면, v-on:click.self.prevent는 요소 자체에 대한 클릭을 방지합니다. 🎜
🎜2.1.4의 새로운 기능🎜
rrreee🎜네이티브 DOM 이벤트에서만 작동할 수 있는 다른 수정자와 달리 .once 수정자는 사용자 정의 < a href="/js/js-vuejs-comComponents-custom-events.html" target="_blank">구성요소 이벤트. 구성 요소에 대한 설명서를 읽지 않았더라도 지금 걱정하지 마세요. 🎜
🎜2.3.0 new 🎜
🎜Vue는 addEventListener의 passive 옵션은 .passive 수정자를 제공합니다. 🎜rrreee🎜이 .passive 수정자는 특히 모바일 성능을 향상시킬 수 있습니다. 🎜
🎜.passive와 .prevent를 함께 사용하지 마세요. .prevent가 무시되고 브라우저에서 다음과 같은 문제가 발생할 수 있습니다. 경고. .passive는 이벤트의 기본 동작을 차단하고 싶지 않다는 것을 브라우저에 알려줍니다. 🎜
🎜
🎜

키 수정자
🎜키보드 이벤트를 들을 때 세부적인 키 입력을 확인해야 하는 경우가 많습니다. Vue를 사용하면 키보드 이벤트를 들을 때 v-on에 대한 키 수정자를 추가할 수 있습니다. 🎜rrreee🎜직접 KeyboardEvent.key 노출된 유효한 키 이름은 수정자로서 kebab-case로 변환됩니다. 🎜rrreee🎜위의 예에서 핸들러 함수는 $event.key가 PageDown과 동일한 경우에만 호출됩니다. 🎜🎜
🎜

키 코드🎜

🎜keyCode의 이벤트 사용중단되었습니다 최신 브라우저에서는 지원되지 않을 수 있습니다. 🎜
🎜keyCode 속성 사용도 허용됩니다: 🎜rrreee🎜필요한 경우 이전 브라우저를 지원하기 위해 Vue는 가장 일반적으로 사용되는 키코드에 대한 별칭을 제공합니다: 🎜

  • .enter.enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

rrreee


系统修饰键

2.1.0 新增

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl

  • .alt

  • .shift

  • .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (?)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (?)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

rrreee

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。


.exact 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

rrreee


鼠标按钮修饰符

2.2.0 新增

  • .left

    • 🎜.tab🎜🎜🎜.delete("삭제" 및 "백스페이스" 키)🎜🎜🎜.esc🎜🎜🎜.space🎜🎜🎜.up < /code>🎜🎜🎜.down🎜🎜🎜.left🎜🎜🎜.right🎜
🎜IE9에서는 일부 키(.esc 및 모든 화살표 키)의 key 값이 다릅니다. IE9를 지원하려면 이러한 내장 별칭을 선호해야 합니다. 🎜
🎜전역 config.keyCodes 객체 사용자 정의 키 수정자 별칭: 🎜rrreee🎜
🎜

시스템 수정자 키 < /strong>

🎜2.1.0 New 🎜
🎜다음 수정자를 사용하여 해당 키를 눌렀을 때만 마우스나 키보드를 실행할 수 있습니다. 경청자. 🎜🎜🎜🎜.ctrl🎜🎜🎜.alt🎜🎜🎜.shift🎜 🎜🎜.meta🎜
🎜참고: Mac 시스템 키보드에서 메타는 명령 키(?)에 해당합니다. Windows 시스템 키보드에서 메타는 Windows 로고 키(?)에 해당합니다. Sun 운영 체제 키보드에서 메타는 솔리드 gem 키(◆)에 해당합니다. 특정 다른 키보드, 특히 MIT 및 Lisp 시스템의 키보드와 Knight 키보드 및 space-cadet 키보드와 같은 후속 키보드에서는 메타가 "META"로 표시됩니다. 기호 키보드에서는 메타가 "META" 또는 "Meta"로 표시됩니다. 🎜
🎜예: 🎜rrreee
🎜수정자 키는 일반 키와 다르다는 점에 유의하세요. keyup 이벤트와 함께 사용할 경우 수정자 키를 눌러야 합니다. 이벤트가 트리거된 상태입니다. 즉, keyup.ctrl은 ctrl을 누른 상태에서 다른 키를 놓아야만 트리거될 수 있습니다. 그리고 단순히 ctrl을 놓으면 이벤트가 트리거되지 않습니다. 이 동작을 원하면 ctrl에 keyCode 대신 keyup.17을 사용하세요. 🎜
🎜
🎜

.exact 수정자🎜

🎜2.5.0 New 🎜
🎜.exact< / code> 수정자를 사용하면 시스템 수정자의 정확한 조합에 의해 트리거되는 이벤트를 제어할 수 있습니다. 🎜rrreee🎜
🎜

마우스 버튼 수정자🎜

🎜 2.2.0 새로운 🎜
🎜🎜🎜.left🎜

  • .right.right

  • .middle

    • 这些修饰符会限制处理函数仅响应特定的鼠标按钮。


    为什么在 HTML 中监听事件?

    你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on

    .middle

    이 수정자는 특정 마우스 버튼에만 응답하도록 핸들러 기능을 제한합니다.


    HTML에서 이벤트를 수신하는 이유는 무엇인가요?

    이러한 이벤트 청취 방식은 관심사 분리라는 오랜 전통을 위반한다는 것을 알 수 있습니다. 하지만 걱정하지 마세요. 모든 Vue.js 이벤트 핸들러와 표현식은 현재 뷰의 ViewModel에 엄격하게 바인딩되어 있으므로 유지 관리에 어려움이 발생하지 않습니다. 실제로 v-on을 사용하면 여러 가지 장점이 있습니다:

    🎜　1. HTML 템플릿을 스캔하면 JavaScript 코드에서 해당 메서드를 쉽게 찾을 수 있습니다. 🎜🎜　2. JavaScript에서 이벤트를 수동으로 바인딩할 필요가 없기 때문에 ViewModel 코드는 DOM에서 완전히 분리되고 테스트하기 더 쉬운 매우 순수한 논리가 될 수 있습니다. 🎜🎜　3. ViewModel이 소멸되면 모든 이벤트 핸들러가 자동으로 삭제됩니다. 청소에 대해 걱정할 필요가 없습니다. 🎜🎜🎜🎜🎜 🎜