イベントオブジェクトについて紹介します。jsイベントオブジェクトとは何ですか?-jsチュートリアル-php.cn

イベントオブジェクトについて紹介します。jsイベントオブジェクトとは何ですか?

php是最好的语言

リリース： 2018-07-26 12:53:37

オリジナル

1712 人が閲覧しました

まず、イベントオブジェクトを紹介します。イベントはブラウザ内のオブジェクト、つまりイベントの形で存在します。イベントがトリガーされると、イベントオブジェクトイベントが生成されます。これには、イベントに関連するすべての情報が含まれます。イベントを引き起こした要素、イベントの種類、および特定のイベントに関連するその他の情報が含まれます。この記事は主に JavaScript イベントの js イベントオブジェクトに関する情報を紹介するもので、必要な方は参考にしてください

1。イベントオブジェクトを理解する

イベントはブラウザ内のオブジェクト、つまりイベントの形で存在します。イベントがトリガーされると、イベントオブジェクトイベントが生成されます。これには、イベントに関連するすべての情報が含まれます。イベントを引き起こした要素、イベントの種類、および特定のイベントに関連するその他の情報が含まれます。

例: マウス操作によって生成されたイベントにはマウスの位置に関する情報が含まれ、キーボード操作によって生成されたイベントには押されたキーに関連した情報が含まれます。

すべてのブラウザはイベントオブジェクトをサポートしていますが、DOM ではイベントオブジェクトをイベント処理関数に唯一のパラメータとして渡す必要があります。IE では、イベントはウィンドウオブジェクトの属性です。

2. HTMLイベントハンドラーのイベント

<input id="btn" type="button" value="click" onclick=" console.log(&#39;html事件处理程序&#39;+event.type)"/>

ログイン後にコピー

これにより、ローカル変数eventを含む関数が作成されます。イベントオブジェクトには、event を通じて直接アクセスできます。

3. DOM 内のイベントオブジェクト

DOM レベル 0 および DOM レベル 2 のイベントハンドラーは、パラメーターとしてイベントに渡されます。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log("DOM0 & click");
console.log(event.type); //click
}
btn.addEventListener("click", function (event) {
console.log("DOM2 & click");
console.log(event.type); //click
},false);
</script>
</body>

ログイン後にコピー

4. IE のイベントオブジェクト

最初のケース: DOM0 レベルのメソッドを通じてイベントハンドラーを追加する場合、イベントオブジェクトはウィンドウオブジェクトの属性として存在します。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function () {
var event=window.event;
console.log(event.type); //click
}
</script>
</body>

ログイン後にコピー

2 番目のケース:attachEvent() を通じて追加されたイベントハンドラー、イベントオブジェクトがパラメーターとして渡されます。

rreee

しかし、理解できないことが2つあります。

1. イベントパラメーターは、DOM レベル 0 メソッドを通じて追加されたイベントハンドラーに渡すこともできます。その型は window.event.type と同じですが、渡されるイベントパラメーターは window.event とは異なります。。なぜ？？

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
})
</script>
</body>

ログイン後にコピー

2.attachEvent を通じて追加されたイベントハンドラーで渡されるイベントが window.event とは異なります。

btn.onclick= function (event) {
var event1=window.event;
console.log(&#39;event1.type=&#39;+event1.type); //event1.type=click
console.log(&#39;event.type=&#39;+event.type); //event.type=click
console.log(&#39;event1==event?&#39;+(event==event1)); //event1==event?false
}

ログイン後にコピー

以上、編集者が紹介したJavaScriptイベント学習まとめ(3) jsイベントオブジェクトの関連知識もっと詳しく知りたい方は、スクリプトハウスにご注目ください。 Webサイト！