単純なイベント
ケース1：マウスが移動すると、入力テキストボックスにマウスの位置（座標）が表示されます
。Onmousemove：マウスが移動すると、
ドキュメントがトリガーされます。οnmοusemοve = function（）{function body（移動後に行うこと）}
イベントオブジェクト（関数パラメーター）：イベント応答関数がトリガーされると、ブラウザーはイベントオブジェクトを実際のパラメーターとして毎回応答関数に渡します（function（）{}、コールバック関数とも呼ばれます）
document.οnmοusemοve= function（formal parameter（パラメーター受信時に設定））{function body（移動
後の操作）}ここで実行したマウス移動後の移動位置パラメーターは、formalパラメーターにカプセル化されます。ここでのイベントformalパラメーターには多くの組み込みがあります。属性
ドキュメント。οnmοusemοve= function（x）{ var a = x.clientX; var b = x.clientY; input.value = "x：" + a + "; y：" + b;（テキストボックスに座標を表示）}
ケース2：マウスを動かして、ボックスがマウスに追従するようにします
var box = document.getElementById（ "box"）
（box）document.οnmοusemοve= function（x）{（移動するオブジェクトはドキュメントではなく、ドキュメント、つまりマウスが箱から出されるようにすると、マウスは一緒に移動しないので、ドキュメントをバインドするのが最善です）
var a = x.clienX;
var b = x.clientY;
box.style.left = a + " px ";
box.style.top = b +" px ";
}
Var a = x.clienX; var a = x.clien.pageX;
var b = x.clientY;（現在のマウスの座標を取得するために使用表示ウィンドウ）var b = x.client.pageY（現在のページ座標を基準にしてマウスを取得するために使用）
ケース3：
1。ドラッグした要素をマウスで押すと、マウスを
下にドラッグし始めます。2
。マウスを動かすと、ドラッグした要素がマウスのマウス上で移動します
。3
。マウスを離すと、ドラッグした要素が現在の位置に固定されます。
onMouseUpのれる
その後ONMOUSEMOVE巣へれるonmousedownケース2内に配置され、
そしてその後、解放、素子の固定機能体はdocument.οnmοusemοve=ヌル、すなわち、onMouseUpのネスティングdocument.οnmοusemοve= NULL、である
他のボックスとリリースの位置に移動します、他のボックスでカバーされます。
結果を意味のあるものにするために、cancel releaseコマンドdocument.οnmοuseup= nullをマウスを離したときに関数本体に追加し、ドラッグアンドドロップとともにキャンセルします。 1回限りのイベントです
最適化：ドラッグプロセス中、左上隅の代わりにマウスを中心点として使用します
1.divオフセットを見つけます
2.マウスのX値-要素の左の値
3.マウスのY値-要素の最上位値
4.関数構造varc = x.clientX—box.offsetLeft
var d = x.clientY—box.offsetTopを追加して
から、box.style.left = a + "px"を変更します。box.styleになります。 left = a + "px" —C;
box.style.top = b + "px"; box.style.top = b + "px" —d;
ケース4：マウスホイールイベント（ブラウザとの互換性の問題）
設定。マウスホイールを下にスクロールするとボックスが長くなり、マウスホイールを上にスクロールするとボックスが短くなります。スクロールイベントオブジェクト（パラメータ）にも組み込みのプロパティwheelDeltaを上に
スクロールすると、正のパラメーターカプセル化が提供されるため、ホイールイベントボックスに適用して長さボックスを変更できます
。onmousewheel= function { （> 0は彼がアップしていることを証明します）if（x.wheelDelta > 0）{ box.style.height = box.clientHeight—10 + "px" } else {box.style.height = box.clientHeight + 10 + "px" return false（デフォルトの動作をキャンセル）} }スクロール時ホイールがスクロールしている場合、ブラウザにスクロールバーがある場合は、スクロール時にブラウザでスクロールします。これはブラウザのデフォルトの動作です。発生させたくない場合は、デフォルトの動作をキャンセルできます。returnfalseを追加できます。関数本体に。
Firefoxで使用：構文はbox.addEventListener（ "DOMMOUSEScroll"、function（）{}、false）です。
ケース5：キーボードイベント
キーボードイベントは通常、フォーカスを取得できるいくつかのオブジェクト（カーソルが点滅しているテキストボックスなど）またはドキュメントオブジェクトに
バインドされます。キーボード：onkeydownを押し
、キーボード：onkeyup
イベントオブジェクトを離します。キーボードイベント組み込みプロパティkeyCodeは、どのキーが押されたかを確認できますが、フィードバックは対応するキーのコードです。
どのキーを設定して、どの情報を文書化できるかをフィードバックします。οnkeydοwn = function（x）{ if（x.keyCode
67）{ console.log（ "xixixix"）} } ctrl + cが押されているかどうかを判断するには、上記の式をif（x.keyCode
67）変更する場合（x.keyCode == 67 && x.ctrlKey）に
キーコードにはまた、イベントオブジェクトは、いくつかの組み込みの属性を提供する：altKeyのctrlKey shiftKeyが代替CTRLシフトが押下されたか否かを判断することができ
、それが押された場合trueを返し、それ以外の場合はfalseを返します
Bomオブジェクト（ブラウザオブジェクトモデル）
は、JSを介してブラウザを操作できます。
構造には次のオブジェクトが含まれます。window：
ブラウザウィンドウ全体を表します。同時に、windowはWebページのグローバルオブジェクトでもあります
。Windowには次のものが含まれます。オブジェクトconsole.log（window .location）、関数本体location = "https：//cn.bing.com/？FORM = Z9FD1 ..."ハイパーリンク
ナビゲーターを実行できます：ブラウザー情報を表し、さまざまなブラウザーを実行できます。このオブジェクトによって識別されます
場所：アドレス、ブラウザのアドレスバー情報を表す、またはブラウザを操作してページにジャンプします
履歴：ブラウザの履歴を表します。プライバシー上の懸念から、オブジェクトは特定の履歴を取得できません。前進するためにブラウザを操作するだけです
console.log（ウィンドウ）がウィンドウオブジェクトを表示した後、
Bomオブジェクトはウィンドウオブジェクトの属性として保存されます。ウィンドウオブジェクトを介して使用することも、
console.logを直接使用することもできます。 （navigator.userAgent）userAgentは文字列であり、この文字はブラウザ情報を説明するために使用されるコンテンツを含みます。
ブラウザごとにuserAgentが異なるため、この属性を使用してブラウザ情報を判別できます。
場所には対応する機能があります：更新function、location.reload（）
履歴：alert（History.length）長さは、現在アクセスされているリンクの数（履歴リンクの数と現在のリンクの総数）を取得できます
（）前のページに戻る
（）次のページにジャンプ
go（）は指定されたページにジャンプできます。パラメータとして整数を渡す必要があります。1ページ進むには1を渡し、2ページ進むには2を渡します。-1と-2は反対の
ウィンドウです。setInterval（）が呼び出されます。定期的に、定期的に関数を実行でき
ます。パラメーターは、コールバック関数（関数は間隔を置いて1回呼び出されます）+値（ミリ秒単位の各呼び出し間の時間）
var h = document.getです。。。。。。。。（ ""）
var num = 1
var timer = window.setInterval（function（）{h.innerHTML = num ++（–カウントダウンになるとき）;}、1000）
戻り値：タイマーのロゴを表す数値を返します。
タイマーをクリアする：対応するタイマーを閉じることができるように、タイマーの識別子をパラメーターとして渡す必要があります
（新しい値を結果と等しくすることはできません。そうでない場合は、各増分の結果が大きくなります。タイマー要件と等しくすることはできず、タイマーを超え、タイマーをクリアすることはできません。器）
関数本体にif（num == 10）{window.clearInterval（timer）}を追加でき
ます。イベントが複数回トリガーされた後、タイマーが重ね合わされます。重ね合わせたくない場合
ケース6：ボタンをクリックした後、divは右に移動します
btn.οnclick= function（）{box.style.left = 200 + "px"}
詳細：
btn.οnclick= function（）{varをクリックした後の時間間隔移動timer = setInterval（function（）{ var oldValue = box.offsetLeft; box.style.left = oldValue + "10px"; }、1000）}（このメソッドの制限は、位置が固定されていることです）
デッドポジションを決定するために、getstyle関数を使用して連続的に変化する値を取得できます。これは
要素のスタイルを取得するために使用され
ます。functiongetstyle（この組み込み関数を使用してスタイルを取得します）（obj、name ）{ var caaobj = getComputedStyle（このメソッドを使用してすべてのスタイルを取得）（obj、null）; return caaobj [name]（returnと属性名は括弧で囲む必要があります。そうでない場合、デフォルトは属性値です）} var left = getstyle （値の使用と割り当て）（ボックス、「左」）console.log（左）これは、ケース6からbtnに適用できます。οnclick= function（）{var timer = setInterval（function（）{ var oldValue = getstyle（box 、 "left"）（このgetstyle関数はpx値を取得します、var ov = window.parseInt（oldValue）したがって、加算および減算する場合は、parseIntを使用する必要があります）var bibi = ov + 10; box.style.left = bibi + "px" }、1000）}要素を移動するために800pxで、クリアタイマーは移動を停止し、if（newvalue == 800）{ clearInterval（timer）}を関数本体に追加できます
inner +（テキストはテキストを取得しますHTMLはテキスト+ラベルを取得します）
setInterval（time2,1000）;指定された時刻システムの新しい日付が実行されるたびに、システム時刻は1秒ごとに更新されます