loadイベント

loadイベント

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【loadイベント】
load イベントは HTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。

【loadイベントの使い方】
load イベントは HTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。

【onload プロパティに、イベントハンドラを登録した場合】
window オブジェクトのプロパティにイベントハンドラを登録する場合は onload プロパティを使用します。

【イベントリスナーを登録する場合】
addEventListener メソッドの一番目の引数には、'load' を指定し、2番目にはイベントハンドラを指定する。

【引き数に Event を使う場合】
＜script＞ function loadFinished(event){
　console.log(event);
}
window.addEventListener('load', loadFinished);
＜/script＞

サンプルコード

ブラウザを立ち上げる

【bodyタグのonload属性を使う】
body タグの onload 属性にイベントハンドラを登録する方法

window オブジェクトの onload プロパティと body タグの onload 属性の両方にイベントハンドラを登録した場合、あとから登録された方のイベントハンドラのみ呼び出されるのでこの二つは内部的には同じものと考えられます。
サンプルコード

ブラウザを立ち上げる

OKボタンをクリックする

【DOMContentLoadedイベントとloadイベントの違い】

HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。この時点で DOMContentLoaded イベントが発生します。

DOMContentLoaded イベントが発生したあと、画像やスタイルシートなどの HTML ページのリソースの読み込みがすべて完了すると load イベントが発生します。このため、順番としては DOMContentLoaded イベントが発生したあとに load イベントが発生します。

copyイベント,cutイベント,pasteイベント

copyイベント,cutイベント,pasteイベント

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【イベントの意味】
・copy イベント→ブラウザ上でコピー操作を行ったときに発生するイベント
・cut イベント→ブラウザ上でカット操作を行ったときに発生するイベント
・paste イベント→ブラウザ上でペースト操作を行ったときに発生するイベント

【イベントの使い方】
copyイベント、cutイベント、pasteイベントとも、下図の通りで、Element オブジェクトで発生する。

【要素属性値に、イベントハンドラーを登録した場合】
※赤字は、属性名
＜textarea oncopy="copy()" oncut="cut()" onpaste="paste()"＞ ＜/textarea＞ ＜script＞
function copy(){
　console.log('Copy');
}
＜/script＞

＜script＞
function cut(){
　console.log('Cut');
}
＜/script＞

＜script＞
function paste(){
　console.log('Paste');
}
＜/script＞

【プロパティにイベントハンドラーを登録した場合】

【イベントリスナーを登録する場合】
addEventListener メソッドを使って、1 番目の引数に 'copy' 、 'cut' または 'paste' を指定し、2番目の引数にはハンドラーを指定する。

【イベント・ハンドラーの引数にEvent オブジェクトが渡れた場合】

サンプルコード

「サンプル.css」

textarea{

    width:200px;

    height:100px;

    }

「サンプル1.js」

function copy(event){

    alert('Copyは禁止です')

    event.preventDefault();

}

function cut(event){

    alert('Cutは禁止です')

    event.preventDefault();

}

function paste(event){

    alert('Pasteは禁止です')

    event.preventDefault();

}

let memoarea = document.getElementById('memo');

memoarea.addEventListener('copy', copy);

memoarea.addEventListener('cut', cut);

memoarea.addEventListener('paste', paste);

ブラウザを立ち上げる

テキストボックスに文字を書き込み、コピーすると、エラーが表示される

Cut、 Paste の操作をそれぞれ preventDefault メソッドを使ってデフォルトの動作を無効にしています