zishu's blog

一个热爱生活的博主。https://zishu.me

HTMLイベント属性--DOM

2020年10月29日#笔记38

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

HTMLのイベント属性に関する内容が説明されています。主に、ウィンドウ、フォーム、キーボード、マウスイベントについて触れています。ウィンドウイベントには、印刷前後のイベント（`onbeforeprint`、`onafterprint`）、ページ離脱時のイベント（`onbeforeunload`、`unload`）、エラーハンドリング（`onerror`）、ページロード完了時のイベント（`onload`）などがあります。フォームイベントには、フォーカスの取得・喪失（`onfocus`、`onblur`）、値の変更（`onchange`、`oninput`）、無効な入力時のイベント（`oninvalid`）が含まれます。各イベントには具体的なコード例が示されており、デモを通じて動作を確認できるようになっています。

html のオブジェクト、イベント、メソッドを研究し、js の観点からこのタグの属性がどのような方法で、どのイベントをトリガーして実現されるのかを考えます

キーボードマウスイベント
ページウィンドウイベント
フォームイベント

一、window イベント属性#

window オブジェクトに対してトリガーされるイベントは、<body>内で実行されます

1.onbeforeprint／onafterprint#

ブラウザの印刷前 / 後にトリガーされます

<body onbeforeprint = print()>
<script>
    function print() {
        alert("印刷前！")
    }
</script>

印刷前と印刷後のイベントメソッドは似ています。一つは印刷前にトリガーされ、もう一つは印刷が終了した後にトリガーされるonafterprintイベントです。

デモを見る

2.onbeforeunload/unload#

ページを離れる前にトリガーされるイベント／後にトリガーされるイベント

F12 を開いてからリフレッシュしたり、ブラウザを閉じたりすると、ブラウザでイベントがトリガーされます

<script>
    window.onbeforeunload = function(){
        return "ヒント"
        //返される内容は表示されません、
        //リフレッシュ時やブラウザを閉じると、ブラウザは直接再読み込みするかどうかを提示します。直接returnすることはできません。
    }
</script>

デモを見る

3.onerror#

画像にエラーが発生したときにこのイベントをトリガーできます。このイベントをサポートするタグは<img>,<object>,<style>のみです。

<img src="1.gif" onerror = "myfun()">

<script>
    function myfun() {
        alert("画像エラー")
    }
</script>

1.gif が存在しないため、myfun () イベントがトリガーされ、ポップアップウィンドウが表示されます。

デモを見る

4.onhashchange#

ドキュメントが変更されたときに発生するスクリプト
？？？

5.onload#

ページが読み込まれた後にトリガーされます

デモを見る

6.onmessage#

メッセージがトリガーされたときに実行されます
???

7.onoffline#

ブラウザがオフラインのときにトリガーされます

<body onoffline="myfun()">

8.ononline#

ブラウザがオンラインで動作しているときにトリガーされます

<body ononline="myfun()">

ononlineとonofflineはネットワークが切断または接続されたときにトリガーされ、コンピュータのネットワークを制御して効果を確認できます。

9.onpagehide#

ユーザーがウェブページを離れたときにトリガーされます。また、ウィンドウが隠れたときに実行されるスクリプトとも理解できます。

ページをリフレッシュするとイベントがトリガーされます。

デモを見る

10.onpageshow#

新しいページを開いたりリフレッシュしたときにトリガーされます。

デモを見る

onloadに相当し、ページが読み込まれたときにトリガーされますが、異なるブラウザでトリガーされるタイミングが異なります。

ページを初めて読み込むとき、onpageshowはieブラウザではトリガーされず、他の状況ではトリガーされます。

11.onresize#

ブラウザウィンドウのサイズが変更されたときにトリガーされるイベント

<body onresize="myfun()">
    <script>
        function myfun() {
            alert('ブラウザウィンドウが変更されました')
        }
    </script>
</body>

デモを見る

12.onunload#

ページがダウンロードされたときにトリガーされます。つまり、リフレッシュまたはページを閉じたときにトリガーされます。

window.onunload = function() {
    return '本当に閉じますか？'
}

13.onpopstate#

ブラウザウィンドウの履歴が変更されたときに実行されるスクリプトです。

14.onredo#

ドキュメントが元に戻されたときにトリガーされるイベントです。

二、form イベント属性#

html フォーム内でトリガーされるイベントで、通常は form 要素内で使用されます。

1.onblur#

フォーカスを失ったときに実行されるスクリプト

<input name="int" id="int" onblur="myfun()">
<script>
    function myfun() {
        var int = document.getElementById('int').value;
        document.getElementById('int').value = int.toUpperCase();
    }
</script>

input に onblur=myfun () のイベントをバインドし、input がフォーカスを失ったときにどのような効果が生じるかを示します。

デモを見る

2.onfocus#

要素がフォーカスを得たときにトリガーされるイベントで、onblur とは逆です。

デモを見る

3.onchange#

要素の値が変更されたときにトリガーされるイベント

<input type="text" id="int" name="int" onchange="myfun()">
<script>
    function myfun() {
        alert('私の要素が変更されました！')
    }
</script>

このイベントは、input の内容を操作して変更した後、ブラウザがアラートを表示することを意味します。

デモを見る

4.oncontextmenu#

ユーザーが右クリック操作を行ったときにこのイベントがトリガーされます。

任意の要素にバインドしてトリガーでき、リフレッシュせずに繰り返しトリガーできます。

<div oncontextmenu="myfun()">これはテキストボックスです！</div>
<script>
    function myfun() {
        alert('oncontentmenuイベントがトリガーされました')
    }
</script>

デモを見る

5.onformchange#

フォームに入力があったときにトリガーされるイベント

スクリプトをトリガーできません

6.onforminput#

フォームにユーザー入力があったときにトリガーされるイベントですが、トリガーできません。

ブラウザがサポートしていません。

6.oninput#

要素にユーザー入力があったときにトリガーされるイベントです。
入力ボックスに入力または削除すると oninput がトリガーされます。

<input type="text" oninput="myfun()">
<script>
    function myfun() {
        alert('oninputがトリガーされました')
    }
</script>

onchangeとoninputには似たところがあります。どちらもテキスト内容が変更されたときにトリガーされます

しかし、onchangeは input がフォーカスを失ったときにのみトリガーされ、oninputはすぐにトリガーされます。

デモを見る

7.oninvalid#

oninvalidイベントはrequired属性と組み合わせて使用します。

requiredを使用する場合、その属性は必須フィールドを示し、oninvalidは要素が無効なときにトリガーされるイベントです。

<form>
    <input type="text" oninvalid="myfun()" required>
    <input type="submit">
</form>
    <script>
        function myfun() {
            alert('入力が空です')
    }
</script>

デモを見る

8.onreset#

フォーム内のリセットボタンがクリックされたときにトリガーされます。

<form onreset="myfun()">
    <input type="text">
    <input type="reset" value="リセット">
</form>
<script>
    function myfun(){
        alert('リセット成功')
    }
</script>

デモを見る

9.onselect#

テキストが選択されたときにトリガーされます。

<input onselect="myfun()" value="私を選択してください">
<script>
    function myfun() {
        alert('onselectがトリガーされました ')
    }
</script>

デモを見る

10.onsubmit#

フォームが送信されたときにトリガーされます。

イベントを form タグにバインドする必要があります。

<form onsubmit="myfun()">
    <!-- 注意：イベントはformタグにバインドする必要があります -->
    <input type="text" name="name">
    <input type="submit" value="送信">
</form>
<script>
    function myfun() {
        alert('送信されました')
    }
</script>

デモを見る

注意：送信後は自動的にページがリフレッシュされ、document と console のトリガー内容はすぐにリフレッシュされ、一瞬で消えます。alert だけがページに留まり、確認を待ちます。

三、key キーボードイベント#

1.onkeydown#

任意のキーが押されたときにトリガーされます。システムボタン、矢印キー、ファンクションキーも含まれます。

デモを見る

2.onkeypress#

任意のアルファベットまたは数字キーが押されたときにトリガーされますが、システムボタン、矢印キー、ファンクションキーは認識されません。

3.onkeyup#

以前に押された任意のキーが放されたときにトリガーされます。

デモを見る

四、mouse マウスイベント#

マウスを使用してトリガーされるイベント

1.onclick#

マウスで要素をクリックしたときにトリガーされるイベントです。

<p onclick="myfun()">クリックしてください</p>
<script>
    function myfun() {
        alert('クリック成功')
    }
</script>

デモを見る

2.ondblclick#

マウスをダブルクリックしたときにトリガーされるイベントです。

<div ondblclick="myfun()">テストテキスト！</div>
<script>
    function myfun() {
        alert('ダブルクリックテスト成功！')
    }
</script>

デモを見る

3. ドラッグイベント#

ondrag/
要素がドラッグされているときにトリガーされるイベントです。

ondragstart / ドラッグ操作の開始時に実行されるスクリプトです。

ondrop/
要素がドラッグされているときにトリガーされるイベントです。

ondragend / ドラッグ操作の終了時に実行されるスクリプトです。

ondragenter / 要素が有効なドラッグ＆ドロップ領域にドラッグされたときに実行されるスクリプトです。

ondragleave / 要素が有効なドロップターゲットから離れたときに実行されるスクリプトです。

ondragover / 要素が有効なドロップターゲットの上でドラッグされているときに実行されるスクリプトです。

4.onmousedown/onmouseup#

要素がマウスで押されたときにトリガーされるイベント / マウスが放されたときにトリガーされるイベントです。

一つは押した瞬間にトリガーされます。
もう一つはマウスが放されたときにトリガーされます。

onmouseupの効果はonclickと同じです。なぜなら、clickもクリック後にトリガーされるからです。

これらの二つのイベントを合わせると、clickイベントに相当しますが、これらの二つのイベントを使用してクリックイベントの効果を作ることはできません。

デモを見る

5.onmousemove#

マウスが要素の上に移動したときにトリガーされます。

css の:hoverに相当しますが、イベントとしてはより柔軟で多様な使い方があります。

デモを見る

6.onmouseout#

マウスが要素から離れたときにトリガーされます。

デモを見る

7.onmouseover#

マウスが要素に入ったときにトリガーされます。

onmouseoverとonmousemoveはマウスが要素に入ったときにトリガーされます。

違い：

1.

overは要素に入ったときにトリガーされますが、要素内部で移動してもトリガーされません。

moveは要素に入ったときと要素内部で移動したときの両方でトリガーされます。

2.

overが優先的にトリガーされ、その後にmoveがトリガーされます。

8.onmousewheel#

マウスがスクロールされたときにトリガーされるイベントです。

<style>
    div {
        height: 1000px;
    }
</style>

<body>
    <div onmousewheel="myfun()">テスト</div>
    <script>
        function myfun() {
            alert('onmousewheel')
        }
    </script>
</body>

毎回スクロールするたびにトリガーされ、body にバインドできます。

デモを見る

9.onscroll#

要素のスクロールバーがスクロールされたときにトリガーされるイベントです。

<div onscroll="myfun()">私の若い頃、父は私にずっと考えているアドバイスをくれました。</div>
<p>スライドした<span id="ci"></span>回数</p>
<script>
    x = 0
    function myfun() {
        document.getElementById('ci').innerHTML = x += 1
    }
</script>

このケース－－－スクロールカウント

デモを見る

違い：

1.wheelはホイールが滑動しているときに有効で、マウスをドラッグしているときには無効です。

2.onscrollは滑動しているときでもドラッグしているときでも有効です。

文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。

Blockchain ID
#51197-8
所有者
0x2f71d4d03cb76f5b8122b9321bfd74fea25558ed
取引ハッシュ
作成 0xa90bdd0a...5aa56abf89 最後更新 0xa90bdd0a...5aa56abf89
IPFS アドレス
ipfs://bafkreibuojwivdgsdeof2bgg5xo4vmpdbajto2hu7zuny4f2a5riqtbyaq