イベント

イベントオブジェクト

(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: ユーザーが

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

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

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

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