zishu's blog

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

HTMLイベント属性--DOM

2020年10月29日#笔记38

AI 翻訳

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

AI が生成した要約

HTMLのイベント属性に関する記事では、JavaScriptの観点からHTMLオブジェクトやイベント、メソッドについて考察しています。主にウィンドウイベント、フォームイベント、キーボードやマウスイベントが取り上げられています。ウィンドウイベントには、印刷前後のイベント（onbeforeprint/onafterprint）、ページ離脱時のイベント（onbeforeunload/unload）、エラー発生時のイベント（onerror）、ページ読み込み完了時のイベント（onload）などがあります。フォームイベントには、要素がフォーカスを失ったときのイベント（onblur）、フォーカスを得たときのイベント（onfocus）、値が変更されたときのイベント（onchange）、ユーザー入力時のイベント（oninput）などが含まれています。これらのイベントを利用することで、ユーザーの操作に応じた動的な反応を実現できます。

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