最もよく使用されるJavaScriptイベントについて詳しく学ぶ

JavaScript イベント:

イベントとは、特定のコンポーネントが特定の操作を実行したときにトリガーされる特定のコードの実行を指します。

よく使用されるイベント:

財産	トリガータイミング
中止	画像の読み込みが中断されました
ぼやけている	要素がフォーカスを失う
オンチェンジ	ユーザーがフィールドの内容を変更する
クリック時	オブジェクト上でマウスをクリックする
クリック	オブジェクトをダブルクリック
エラー	ドキュメントまたは画像の読み込み中にエラーが発生しました
オンフォーカス	要素にフォーカスがある
キーダウン	キーボードのキーが押された
キーを押すと	キーボードのキーが押されたり押し続けられたりします
オンキーアップ	キーボードのキーが離されました
アップロード	ページまたは画像の読み込みが完了しました
マウスダウン時	マウスボタンが押された
マウスを動かす	マウスを動かすと
マウスアウト時	マウスを要素から離す
マウスオーバー時	マウスを要素の上に移動する
マウスを離す	マウスボタンが放される
リセット時	リセットボタンがクリックされました
サイズ変更	ウィンドウまたはフレームのサイズが変更されます
選択時	テキストが選択されました
送信時	送信ボタンがクリックされた
オンアンロード	ユーザーログアウトページ

イベントアクション

バインディングイベント

方法 1 : タグ内のイベント属性を通じてバインドします。

<本文>
<img id="img" src="upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up" onclick="up()">前へ</button>&nbsp;
<button id="down" onclick="down()">次へ</button>
</本文>

<スクリプト>
    // 最初の関数を表示する up() {
        img = document.getElementById("img"); とします。
        属性設定("src", "upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg")
    }
    // 2番目の画像を表示する function down() {
        img = document.getElementById("img"); とします。
        img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")
    }
</スクリプト>

方法 2 : DOM 要素属性を介してバインドする。

<本文>

<img id="img" src="upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up">前へ</button>&nbsp;
<button id="down">次へ</button>
</本文>

<スクリプト>
    // 最初の関数を表示する up() {
        img = document.getElementById("img"); とします。
        属性設定("src", "upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg")
    }

    s = document.getElementById("up"); とします。
    s.onclick = 上;

    // 2番目の画像を表示する function down() {
        img = document.getElementById("img"); とします。
        img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")
    }

    x = document.getElementById("down"); とします。
    x.onclick = ダウン;
</スクリプト>