イベントオブジェクトとさまざまなイベントの概要

イベント

イベントオブジェクト

(1) イベントオブジェクトとは何ですか?

イベントオブジェクトは、イベントが発生する要素、キーボードのキーの状態、マウスの位置、マウスボタンの状態など、イベントの状態を表します。イベントは、イベントが発生するまで実行されない関数と組み合わせて使用​​されることがよくあります。

(2)イベント関連のメソッドと属性

1. Googleのevent.stopPropagation()、IEのevent.CancelBubble=true: 終了イベントは、伝播プロセスのキャプチャ、ターゲット処理、またはバブリング段階でさらに伝播されます。このメソッドを呼び出した後、ノード上のイベントのハンドラーが呼び出され、イベントは他のノードにディスパッチされなくなります

2. Googleのevent.preventDefault()、IEのevent.returnvalue=false：デフォルトのアクションをキャンセルしますイベントの(タグのhref)。

3.event.clientX、event.clientY：ブラウザウィンドウの表示領域に対するマウスのX、Y座標（ウィンドウ座標） 表示領域にはツールバーやスクロールバーは含まれません。 IEイベントも標準イベントもこの2つの属性を定義しています

4.event.offsetX,event.offsetY:イベントソース要素(イベントをトリガーした要素)を基準としたマウスのX,Y座標この2つを持つのはIEイベントのみです。属性。標準イベントには対応する属性がありません。 event.offsetLeft、event.offsettopと同じ。

5.event.screenX、event.screenY: ユーザーのモニター画面の左上隅を基準としたマウスの X、Y 座標。標準イベントと IE イベントは両方とも、これら 2 つのプロパティを定義します。

6.event.keyCode:キーのコード値を取得します。例: プログラム内でどのキーを押すかを知るにはどうすればよいでしょうか? プログラマは最初からキーボードの各キーのコードを定義しており、どのキーを押すかを知ることができます。クリックしました。

1. マウス イベントは、ページ上のすべての要素によってトリガーできます

click: ユーザーがマウス ボタンをクリックするか Enter キーを押すとトリガーされます。

input.onclick = function () {
　　alert('Lee');
};

dblclick: ユーザーがマウスの主ボタンをダブルクリックすると発生します。

input.ondblclick = function () {
　　alert('Lee');
};

mousedown: ユーザーがマウスを押してもまだ跳ね上げていないときにトリガーされます。

input.onmousedown = function () {
　　alert('Lee');
};

mouseup: ユーザーがマウスボタンを放したときに発生します。

input.onmouseup = function () {
　　alert('Lee');
};

mouseover (mouseenter メソッドはバブルしません): マウスが要素上に移動するとトリガーされます。

input.onmouseover = function () {
　　alert('Lee');
};

mouseout (mouseleaver のこのメソッドはバブルしません): マウスが要素の外に移動するとトリガーされます。

input.onmouseout = function () {
　　alert('Lee');
};

mousemove: マウス ポインターが要素上を移動すると発生します。

input.onmousemove = function () {
　　alert('Lee');
};

2. キーボード イベント

keydown: ユーザーがキーボードのキーを押し続けると、繰り返しトリガーされます。

onkeydown = function () {
　　alert('Lee');
};

keypress: ユーザーがキーボードの文字キーを押したときにトリガーされ、長押しすると、繰り返しトリガーされます。

onkeypress = function () {
　　alert('Lee');
};

keyup: ユーザーがキーボードのキーを放したときにトリガーされます。

onkeyup = function () {
　　alert('Lee');
};

3. HTML イベント

load: ページが完全にロードされたときに window でトリガーされるか、フレームセットがロードされた後にフレームセットでトリガーされます。

window.onload = function () {
　　alert('Lee');
};

unload: ページが完全にアンロードされたときに window でトリガーされるか、フレームセットがアンロードされた後にフレームセットでトリガーされます。

window.onunload = function () {
　　alert('Lee');
};

select: ユーザーがテキスト ボックス (input または textarea) で 1 つ以上の文字を選択するとトリガーされます。

input.onselect = function () {
　　alert('Lee');
};

change: テキストボックス(inputまたはtextarea)の内容が変更されてフォーカスを失ったときにトリガーされます。

input.onchange = function () {
　　alert('Lee');
};

focus: ページまたは要素がフォーカスを取得したときに、window および関連要素でトリガーされます。

input.onfocus = function () {
　　alert('Lee');
};

blur: ページまたは要素がフォーカスを失ったときに、window および関連要素でトリガーされます。

input.onblur = function () {
　　alert('Lee');
};

submit: ユーザーが ff9c23ada1bcecdd1a0fb5d5a0f18437 要素の送信ボタンをクリックすると発生します。

form.onsubmit = function () {
　　alert('Lee');
};

reset：当用户点击重置按钮在ff9c23ada1bcecdd1a0fb5d5a0f18437元素上触发。

form.onreset= function () {
　　alert('Lee');
};

resize：当窗口或框架的大小变化时在window或框架上触发。

window.onresize = function () {
　　alert('Lee');
};

scroll：当用户滚动带滚动条的元素时触发。

window.onscroll = function () {
　　alert('Lee');
};

以上がイベントオブジェクトとさまざまなイベントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。