vue.js-奇妙なeventオブジェクト

久しぶりに何か书いて、この前の仕事は头が大きくて、本当に一绪に残业して死ぬまで.くだらないことは言わないが、この文章を書いたのは、イベントの相手が烏龍を騒がせたからだ.
一、eventオブジェクト
(一)イベントのeventオブジェクト
あなたは先端をやっていると言っていますが、あなたはきっと事件を知っていて、事件を知っていて、あなたはeventの対象を知っていますか?様々なライブラリ、フレームワークにはeventオブジェクトに対する処理が多少あります.例えばjqueryは,その内部を一定のパッケージ化することで,eventオブジェクトの一部の互換性の問題に注目する必要がない.最も典型的には、デフォルトのイベントをブロックする場合は、chromeなどのブラウザで次のように書くことができます.

event.preventDefault();

IEでは、次のように書く必要があります.

event.returnValue = false;

jqueryのおかげで、ブラウザ間での実装では、統一は書くだけです.

event.preventDefault();

互換性?jquery内部で手伝ってくれました.同様に、イベントのバブルを阻止するためやイベントバインド(addEventListener/attachEvent)など、多くのバックエンドで$('xxx')が使用されるほど簡単である.bind(...),これは私たちの今日のポイントではありません.下を見てみましょう.
(二)vueのeventオブジェクト
jqueryよりもvueのイベントバインディングが直感的で便利であることを知っています.テンプレートにv-onコマンドを追加するだけで(@と略記することもできます)、$('xxx')と類似することができます.bindの効果は,セレクタを用いて要素をクエリーする操作が1つ少なくなった.jqueryでは、eventオブジェクトが処理関数にデフォルトで実パラメータとして渡されることを知っています.次のようにします.

$('body').bind('click', function (event) { console.log(typeof event); // object }); 

ここでeventオブジェクトを直接取得しましたが、問題が来ました.vueでは?

"app">
    "click">click me

...
var app = new Vue({
    el: '#app', methods: { click(event) { console.log(typeof event); // object } } }); 

ここでの実現方式はjqueryと一致しているように見えますが、実際にはvueはjqueryよりずっと複雑で、jquery公式にも明らかにv-onは単純ではなくaddEventListenerの文法糖です.jqueryではbindメソッドに入力されたコールバックは、1つの関数テーブルタイプの変数または匿名関数のみであり、転送時には実行できません(後にカッコを付けます).そうしないと、この関数の戻り値をイベントコールバックとして取得することになります.vueのv-on命令が受け入れる値は、v-on:click="click(233)"のような関数実行の形式であってもよいことを知っています.ここでは、パラメータを渡さずに渡すこともできます.

"app">
    "click()">click me

...
var app = new Vue({
    el: '#app', methods: { click(event) { console.log(typeof event); // undefined } } }); 

あれ?私のイベントの相手は?どうして消えたの?印刷してlengthも0であり,このとき実参が確かに伝わっていないことを示している.T_T,パラメータを渡す必要があり,eventオブジェクトを使う必要がある場合,これはどうすればよいのでしょうか.
(三)$event
vueドキュメントを参照すると、この問題を解決するには、特別な変数$eventをコールバックに転送することができます.

"app">
    "click($event, 233)">click me

...
var app = new Vue({
    el: '#app', methods: {  click(event, val) { console.log(typeof event); // object } } }); 

はい、これで正常に見えます.簡単にまとめると、

は括弧を持たない形式を使用し、eventオブジェクトは自動的に実パラメータとして伝達される.

はカッコ付きの形式を使用し、$event変数を使用してeventオブジェクトに明示的に入力する必要があります.

二、烏龍の前は敷物でしょう.今は本物の烏龍が来ました.仲間のコードを見ると、偶然次のようなコードが見えました.

"app">
    "click(233)">click me

...
var app = new Vue({
    el: '#app', methods: { click(val) { console.log(typeof event); // object } } }); 

このコードを見て、私の心は崩壊して、chromeの中に投げ込んで走って、ニマは本当にできて、argumentsを印刷します.lengthも、正常な1です.ニマ!これは何ですか.三観を壊すのか?実パラメータも受信パラメータもなく、このeventオブジェクトのソースは、親の役割チェーンか、または..は、グローバルな役割ドメインです.の全体的に、思わずwindowを思い出した.event .再度MDNで確認してみましたが、やっぱり、window.event,ie,chromeはwindowオブジェクトにこのような属性を持っています.
 
window.event
コードをFirefoxに投げ込んで実行すると、eventはやはりundefinedになります.えっ、これは私も何を言っているのか分かりません...
作者:江湖
リンク:https://www.jianshu.com/p/b078cfe97c92
出典:簡書
簡書の著作権は著者の所有であり、いかなる形式の転載も著者に連絡して授権を得て出典を明記してください.