JS--resizeイベント

resize イベント

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

【resize イベント】
resize イベントはブラウザのウィンドウサイズが変更されたときに発生するイベントです。
onresize プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として resize を指定してイベントリスナーを登録できます。

【resizeイベントの使い方】
resize イベントはページを表示しているブラウザのウィンドウサイズが変更されたときに発生するイベントです。

【onresize プロパティ】
window オブジェクトのプロパティにイベントハンドラを登録する場合
イベントハンドラには、無名関数、アロー関数、コールバック関数は使える。

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

【イベントハンドラに引数：eventを使った場合】
イベントが発生してイベントハンドラやイベントリスナーが呼び出されるとき、引数として発生したイベントに関する情報が含まれる Event オブジェクトが渡されてきます。 load イベントの場合は UIEvent オブジェクトが渡されてきます。

サンプル

ブラウザを起動

ウインドウのサイズを変更

【onresize プロパティと body タグの onresize 属性の両方にイベントハンドラを登録した場合】
サンプルコード


以上

 

 

 

beforeunloadイベント

beforeunload イベント

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

【beforeunloadイベントとは】
→HTML ページが現在のページから他のページへ遷移する直前に発生するイベントです。

遷移前のため、確認ダイアログを表示してページの遷移をキャンセルすることができます。

onbeforeunload プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として beforeunload を指定してイベントリスナーを登録できます。

【beforeunloadイベントの使い方】
beforeunload イベントは HTML ページが現在のページから他のページへ遷移する直前に発生するイベントです。


【window.onbeforeunload プロパティにイベントハンドラを登録した場合】
プロパティを使用する場合は、イベントハンドラに無名関数またはアロー関数式を使って記述することもできます。

Event オブジェクトの preventDefault メソッドはブラウザのデフォルトの処理(例えばリンクをクリックしたらそのリンク先へページが遷移するなど)をキャンセルするためのメソッドです。

 Event オブジェクトの returnValue プロパティに何らかの値を設定することで確認ダイアログが表示されます。

【イベントリスナーを登録する場合】
addEventListener メソッドの最初の引数に'beforeunload' を指定する。


サンプルコード

ブラウザを立ち上げる

リンクをクリックする

「このページを離れる」ボタンをクリックする

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

HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。この時点で DOMContentLoaded イベントが発生しますが、この時点はまだページに含まれる画像やスタイルシートの読み込みが完了しているかどうかは分かりません。
画像などのすべてのリソースの読み込みが完了すると load イベントが発生します。

サンプルコード



ブラウザを立ち上げる

以上

DOMContentLoadedイベント

DOMContentLoadedイベント

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

【DOMContentLoaded イベントとは】
DOMContentLoaded イベントは HTML ページの読み込みが完了し HTML のパース(解析)が完了して DOM ツリーの構築が完了した時点で発生するイベントです。このイベントは addEventListener メソッドの引数として DOMContentLoaded を指定してイベントリスナーを登録してのみ利用できます。

【DOMContentLoadedイベントの使い方】
DOMContentLoaded イベントは HTML ページの読み込みが完了し HTML のパース(解析)が完了して DOM ツリーの構築が完了した時点で発生するイベントです。

【イベントリスナーを登録する場合】
DOMContentLoaded イベントについては属性やプロパティを利用した方法は使用出来ない。

【引数に Event が使われていたら】

サンプルコード

ブラウザを起動する

【DOMContentLoadedイベントとloadイベントの違い】
HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。
この時点で DOMContentLoaded イベントが発生しますが、この時点はまだページに含まれる画像やスタイルシートの読み込みが完了しているかどうかは分かりません。画像などのすべてのリソースの読み込みが完了すると load イベントが発生します。

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 メソッドを使ってデフォルトの動作を無効にしています