JavaScript HTML DOM イベント
JavaScript HTML DOM イベント
HTML DOM は、JavaScript に HTML イベントに反応する機能を提供します。
イベントに反応する
ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに JavaScript を実行できます。
ユーザーが要素をクリックしたときにコードを実行するには、HTML イベント属性に JavaScript コードを追加します:
onclick=JavaScript
HTML イベントの例:
ユーザーがマウスをクリックしたとき ページが読み込まれたとき 画像が読み込まれたときロードされたとき マウスが要素上に移動したとき 入力フィールドが変更されたとき HTML フォームが送信されたとき ユーザーがキー押下をトリガーしたとき
この場合、ユーザーがクリックすると、
の内容が変更されます。要素:
Document
点我点我点我!
点我点我点我!
この場合、関数はイベント ハンドラーから呼び出されます:
请点击这段文本！
HTML イベント属性
HTML 要素にイベントを割り当てるには、event 属性を使用できます。
onclick イベントをボタン要素に割り当てます:
点击按钮来执行 displayDate() 函数。
上の例では、ボタンがクリックされると、displayDate という名前の関数が実行されます。
HTML DOM を使用してイベントを割り当てる
HTML DOM を使用すると、JavaScript を使用して HTML 要素にイベントを割り当てることができます:
onclick イベントをボタン要素に割り当てます:
点击按钮来执行 displayDate() 函数。
上記の例では、displayDate という名前の関数が id =myButn に割り当てられています" HTML 要素。
ボタンがクリックされると、関数が実行されます。
onloadイベントとonunloadイベント
onloadイベントとonunloadイベントは、ユーザーがページに出入りするときにトリガーされます。
onloadイベントは次の目的で使用できます。この情報に基づいて、訪問者のブラウザの種類とバージョンを確認し、
onload イベントを使用して Cookie を処理できます。
onchange イベントは、入力フィールドの検証によく使用されます。
次の例は、ユーザーが入力フィールドの内容を変更すると、upperCase() 関数が呼び出されます。 onmouseout イベントを使用して関数をトリガーできます。マウス ポインターが要素に移動したり、要素から離れたりします。単純な onmouseover-onmouseout の例:
弹出的提示框会告诉你浏览器是否已启用 cookie。
onmousedown、onmouseup、および onclick イベント
Onmousedown、onmouseup、onclick イベントは、マウス クリックのプロセス全体です。まず、マウス ボタンがクリックされると、onmousedown イベントがトリガーされ、次にマウス ボタンが放されると、onmouseup イベントがトリガーされます。最後に、マウスのクリックが完了すると、onclick イベントがトリガーされます。
単純な onmousedown-onmouseup の例:
请输入你的英文名：当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。
