vueでイベントオブジェクトを取得する方法

Vue でイベント オブジェクトを取得する方法は次のとおりです: 1. イベント パラメーターを使用する; 2. $event 属性を使用する; 3. ネイティブ イベント リスナーを使用する。イベント オブジェクトには、ターゲット、タイプ、マウス座標、修飾キーの状態、イベントの動作を防止するメソッドなど、イベントに関するさまざまな情報が含まれています。

Vue でイベント オブジェクトを取得する方法

Vue でイベント オブジェクトを取得するのは非常に簡単です。メソッド:

1. イベント パラメーターの使用

イベント ハンドラー関数は、通常、イベントに関する情報を含む event パラメーターを受け取ります。イベント。例:

<button @click="handleClick">点击我</button>

rrree

2。非ネイティブ イベント ハンドラー (v- など) の $event 属性

を使用します。 on ディレクティブ)、$event 属性を通じてイベント オブジェクトにアクセスできます:

// Vue 实例
export default {
  methods: {
    handleClick(event) {
      // 访问 event 对象
    }
  }
}

<button v-on:click="handleClick">点击我</button>

3 ネイティブ イベント リスナーを使用します。 for

v -on

ディレクティブで使用できない非 Vue コンポーネントまたは要素の場合は、ネイティブ イベント リスナーを使用できます: <pre class='brush:php;toolbar:false;'>// Vue 实例 export default { methods: { handleClick() { // 访问 this.$event 对象 } } }</pre>

イベント オブジェクト プロパティ

イベント オブジェクトには、イベントに関する情報が含まれます。次のようなさまざまな情報が含まれます。

target
• : イベントをトリガーした要素
type
• : イベント タイプ
clientX
• : ドキュメント内のマウス ポインターの水平座標 (左端を基準とした)
clientY
• : ドキュメント内のマウス ポインターの垂直座標 (上端を基準とした)
shiftKey
• 、ctrlKey、altKey: 押された状態修飾キー
preventDefault()
• : イベントの防止
stopPropagation()
• のデフォルト動作: イベントが親要素に伝播するのを防止します

以上がvueでイベントオブジェクトを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。