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 コンポーネントまたは要素の場合は、ネイティブ イベント リスナーを使用できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// Vue 实例 export default { methods: { handleClick() { // 访问 this.$event 对象 } } }</pre><div class="contentsignin">ログイン後にコピー</div></div>イベント オブジェクト プロパティ<p><strong></strong>イベント オブジェクトには、イベントに関する情報が含まれます。次のようなさまざまな情報が含まれます。 </p> <p></p> <ul>target<li>: イベントをトリガーした要素 <code> type

: イベント タイプ

clientX

: ドキュメント内のマウス ポインターの水平座標 (左端を基準とした)

clientY

: ドキュメント内のマウス ポインターの垂直座標 (上端を基準とした)

shiftKey

、ctrlKey、altKey: 押された状態修飾キー

preventDefault()

: イベントの防止

stopPropagation()

のデフォルト動作: イベントが親要素に伝播するのを防止します

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