進捗イベントとフォームイベント

1. ドキュメントの読み込み

ブラウザがページをロードするときは、上から下に順番にロードし、1 行をロードして 1 行を実行します。ページ上部にjsコードを記述した場合、コード実行時にページ内のDOMオブジェクトが読み込まれておらず、この時点でDOMオブジェクトが正常に取得されず、DOMの失敗につながる手術。

解決策 1:js本文の下にコードを記述できます

<body>		<button id="btn">按钮</button>		<script> var btn = document.getElementById("btn");			btn.onclick = function(){					}; </script></body>

解決策 2:ページ全体が読み込まれた後に対応するコールバック関数が実行されるようjsにコードを記述します。これにより、コードが実行されたときに DOM オブジェクトが読み込まれたことを確認できます。window.onload = function(){}window.onload

<script> window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){};}; </script>

2. 進捗イベントの種類

プログレスイベントは、リソースの読み込みの進行状況を表すために使用されます. 主に AJAX リクエスト、、、などの外部リソースの読み込みによってトリガーされ、<img>インターフェイス<audio>を<video>継承<style>し<link>ますProgressEvent。主に以下のイベントを含みます。

abort: 外部リソースのロードが中止されたときにトリガーされます (たとえば、ユーザーのキャンセル)。このイベントは、異常終了の原因となるエラーが発生した場合には発生しません。
error: エラーにより外部リソースをロードできない場合にトリガーされます。
load: 外部リソースが正常にロードされたときにトリガーされます。
loadstart: 外部リソースの読み込みが開始されたときにトリガーされます。
loadend: 外部リソースの読み込みが停止したときにトリガーされ、発生順序はerror、abort、loadおよびその他のイベントの後になります。
progress: 外部リソースのロード中に継続的にトリガーされます。
timeout: 読み込みがタイムアウトしたときにトリガーされます。

リソースのダウンロードに加えて、これらのイベントはファイルのアップロードにも存在することに注意してください。

以下は例です。

image.addEventListener('load', function (event) {image.classList.add('finished');
});

image.addEventListener('error', function (event) {image.style.display = 'none';
});

上記のコードは、イメージ要素がロードされた後にクラスをイメージ要素に追加しますfinished。読み込みに失敗した場合は、画像要素のスタイルを表示しないように設定してください。

場合によっては、スクリプトが実行される前に画像の読み込みが完了することがあります。特に、スクリプトがページの下部に配置されている場合は、イベントリスナー機能がまったく実行されない可能性loadがあります。errorしたがって、より信頼性の高い方法は、complete属性を使用して、読み込みが完了したかどうかを最初に判断することです。

function loaded() {// ...
}

if (image.complete) {loaded();
} else {image.addEventListener('load', loaded);
}

DOM の要素ノードは読み込みエラーがあるかどうかのプロパティを提供しないため、要素の HTML コードにerrorイベントリスナー関数を配置して、エラーが発生したときに 100% 実行されるようにするのが最善です。<img>読み込みエラーが発生。

<img src="/wrong/url" onerror="this.style.display='none';" />

loadendabortイベントのリスナー関数は、イベント、loadイベント、errorイベントのリスナー関数の代わりに使用できます。これは、常にこれらのイベントの後に発生するためです。

req.addEventListener('loadend', loadEnd, false);

function loadEnd(e) {console.log('传输结束，成功失败未知');
}

loadendイベント自体は、進行が終了した理由に関する情報を提供しませんが、すべてのロード終了シーンで必要な何かを行うために使用できます。

また、errorイベントにはバブルしないという特殊な性質があります。したがって、子要素のイベントは、親要素のイベントリスナー関数errorをトリガーしません。error

3.フォームイベントの種類

3.1 入力イベント

inputイベント<input>、、<select>の値が<textarea>変化したときにトリガーされます。チェックボックス ( <input type=checkbox>) またはラジオボタン ( <input type=radio>) の場合、このイベントは、ユーザーがオプションを変更したときにも発生します。さらに、contenteditable属性がオンになっている要素の場合、値が変更されるたびにイベントも発生しますinput。

inputイベントの特徴の 1 つは、ユーザーがボタンを押すたびにイベントがトリガーされるなど、継続的にトリガーされることですinput。

inputイベントオブジェクトはInputEventインターフェイスを継承します。

このイベントは、要素の値が変更された直後にイベントが発生し、要素がフォーカスを失ったときに発生し、この時点でコンテンツが複数回変更された可能性があることを除いchangeて、イベントに非常に似ています。つまり、継続的な変化がある場合、イベントは複数回発生しますが、フォーカスが失われた場合、イベントは 1 回だけ発生します。inputchangeinputchange

以下は<select>要素の例です。

/* HTML 代码如下
<select id="mySelect"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
</select>
*/

function inputHandler(e) {console.log(e.target.value)
}

var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);

上記のコードでは、ドロップダウンボックスのオプションが変更されると、inputコールバック関数を実行するイベントがトリガーされますinputHandler。

3.2 イベントの選択

select内で<input>テキストが選択されたときに発生するイベント。<textarea>

// HTML 代码如下
// <input id="test" type="text" value="Select me!" />

var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {console.log(e.type); // "select"
}, false);

event.target選択したテキストは、要素のselectionDirection、selectionEnd、selectionStartおよび属性を介して取得できますvalue。

3.3 変更イベント

changeイベント<input>、、<select>の値が<textarea>変化したときにトリガーされます。それとinputイベントの最大の違いは、継続的にトリガーされるのではなく、すべての変更が完了したときにのみトリガーされることです. 一方、inputイベントにはchangeイベントを伴う必要があります. 具体的には、以下のような状況に分けられます。

ラジオまたはチェックボックスがアクティブになったときに発生します。
ユーザーが送信したときに発生します。たとえば、選択はドロップダウンリスト (select) から行われ、選択は日付またはファイルの入力ボックスで行われます。
テキストボックスまたは要素の値が<textarea>変更され、フォーカスが失われたときに発生します。

以下は例です。

// HTML 代码如下
// <select size="1" onchange="changeEventHandler(event);">
// <option>chocolate</option>
// <option>strawberry</option>
// <option>vanilla</option>
// </select>

function changeEventHandler(event) {console.log(event.target.value);
}

上記のイベントの例を比較すると、要素とイベントは基本的に同等であるinputことがわかります。<select>inputchange

3.4 無効なイベント

ユーザーがフォームを送信するときに、フォーム要素の値が検証条件を満たさない場合、invalidイベントがトリガーされます。

<form><input type="text" required oninvalid="console.log('invalid input')" /><button type="submit">提交</button>
</form>

上記のコードでは、入力ボックスが必要です。invalid入力されていない場合、ユーザーがボタンをクリックして送信すると、入力ボックスのイベントがトリガーされ、送信がキャンセルされます。

3.5 イベントのリセット、イベントの送信

これら 2 つのイベントは、<form>フォームのメンバーではなく、フォームオブジェクトで発生します。

resetフォームがリセットされたときに発生するイベント (すべてのフォームメンバーがデフォルト値に戻った)。

submitフォームデータがサーバーに送信されたときに発生するイベント。submitボタンではなくフォームが送信されるため、イベントは<form>要素では<button>なく要素で発生することに注意してください。

やっと

フロントエンド情報パッケージは、すべての人に用意されています。54冊、2.57Gフロントエンド関連の電子書籍「フロントエンドインタビュー集（回答・分析付き）」、難解・要点解説動画チュートリアル（フルセット）を収録。

困っている友達は、下のカードをクリックして無料で受け取り、共有できます