JavaScript/Event をテンプレートにして作成

開始行:
*イベント DOM Event ~ ***イベントリスナーの登録 以下の３種類の方法があります。いずれもクリックで関数が呼... -1) HTMLに直接書く <button onclick="alert('Hello world!')">ABC</button> --クリックで 'Hello world!' と書かれたアラートボックスが... --onclick の部分には様々なイベントタイプを指定できます。 -2) DOM要素に書く element.onclick = function( event ){ // ここに処理; }; --クリックで処理が実行されます。 --onclick の部分には様々なイベントタイプを指定できます。 -3) addEventListener を使う１ element.addEventListener( 'click', function( event ){ // ここに処理; }, false); --クリックで function( event ){} に記載された処理が実行さ... --最初の引数は 'click' 以外にも様々なイベントタイプを指定... --event はイベントオブジェクト（後述）で、イベントに関わ... --関数内では this が event.target と同じで「クリックされ... -4) addEventListener を使う２ element.addEventListener( 'click', listener, false); --クリックで listener に定義された処理が実行されます。 --listener はイベントハンドラ関数で、イベントオブジェクト... --この形式では、listener に独自の引数を渡すことはできませ... -5) addEventListener を使う３ element.addEventListener( 'click', function(){ listener... --クリックで listener に定義された処理が実行されます。 --この書き方では、listenerに引数を持たせることができます。 -6) addEventListener を使う４ element.addEventListener( 'click', listenerObject, fal... --クリックで listenerObject の handleEvent に定義された処... --listenerObject は EventListener インタフェースを実装す... ~ ***事例 4), 5) の listener とは -指定された型のイベントが発生するときに、通知を受け取るコ... -listener 関数は、イベントオブジェクトを引数として持ちま... ~ ***事例 6) の listenerObject とは listenerObject は イベントリスナーインタフェースを実装す... function myFunction(event) { ： let n = this.number; ← 引数として渡された i の値が... 　： } element.addEventListener( 'click', { number : i , handleEvent :myFunction }, false); 参考：6) の方法を使ったサンプル ＞ [[JavaScript/ImageSwit... ~ ***イベントオブジェクトとは イベントが発生した際、listener（登録したコールバック関数... function myFunction( event ){ alert(event.target.id); } element.addEventListener( 'click', myFunction, false); イベントオブジェクトからは以下のような情報が取得できます。 |プロパティ名|説明|h //|event.currentTarget|イベントハンドラを登録した要素| |event.target|イベントが発生したDOM要素| |event.target.id|ID名| |event.target.className|クラス名| |event.target.innerHTML|HTML要素| |event.target.style|要素のスタイル| |event.target.childNodes|子要素| |event.target.parentNodes|親要素| |event.target.nextElementSibling|次の要素| |event.type|イベントの種類を表す文字列| |event.screenX / event.screenY|モニタ画面上の座標| |event.pageX / event.pageY|モニタ画面上の座標| |event.clientX / event.clientY|ウインドウ上の座標| |event.offsetX / event.offsetY|要素上の座標| |event.target.offsetWidth / event.target.offsetHeight|幅... |event.timeStamp|イベント発生までの経過時間(ミリ秒)| //|event.isTrusted|イベントがユーザーの操作によって発生し... |event.eventPhase|イベントのフェーズ| //|event.bubbles|イベントがバブリングするかどうか| //|event.cancelable|イベントがキャンセル可能かどうか| ~ ***イベント伝搬について ひとつの要素をクリックすると clickイベントが生成されます... -イベントバブリングフェーズ addEventListener()の３番目のパラメータが false（デフォル... element.addEventListener( 'click', listener, false ) element.addEventListener( 'click', listener ) 以下の図をご覧ください。 https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow... 引用元：https://www.w3.org/TR/DOM-Level-3-Events/ -イベントターゲットフェーズ イベントターゲットに登録されたすべてのリスナーが capture... -イベントキャプチャーフェーズ addEventListenerの３番目のパラメータが trueのケース element.addEventListener( 'click', listener, true ) ~ ***イベント一覧資料 -MDN イベントリファレンス https://developer.mozilla.org/ja/docs/Web/Events -UI Events：W3C Working Draft, 04 August 2016 https://www.w3.org/TR/DOM-Level-3-Events/ ~ ~ **APPENDIX ***モバイル特有のイベント -touchstart -touchend -touchmove -touchcancel -touchenter -touchleave ~ ***レスポンシブなサイトを作る際の考え方（jQuery） とりあえず、PCのマウスのホバーにあたるものがスマホでは存... -デバイスがタッチイベントに対応するか否かを判定し、 touch... var event = 'ontouchstart' in window ? 'touchstart' : 'c... $('.button').on(event, function() { // ここに処理; }); ただしこの方法は、タッチとクリックの両方に反応する Window... ~ -touch 系は使わずシンプルに click のみで設計するのもあり... 上記の使い分けは、clickイベントだと反応が遅い（ touchend ... ~ ~

終了行:
*イベント DOM Event ~ ***イベントリスナーの登録 以下の３種類の方法があります。いずれもクリックで関数が呼... -1) HTMLに直接書く <button onclick="alert('Hello world!')">ABC</button> --クリックで 'Hello world!' と書かれたアラートボックスが... --onclick の部分には様々なイベントタイプを指定できます。 -2) DOM要素に書く element.onclick = function( event ){ // ここに処理; }; --クリックで処理が実行されます。 --onclick の部分には様々なイベントタイプを指定できます。 -3) addEventListener を使う１ element.addEventListener( 'click', function( event ){ // ここに処理; }, false); --クリックで function( event ){} に記載された処理が実行さ... --最初の引数は 'click' 以外にも様々なイベントタイプを指定... --event はイベントオブジェクト（後述）で、イベントに関わ... --関数内では this が event.target と同じで「クリックされ... -4) addEventListener を使う２ element.addEventListener( 'click', listener, false); --クリックで listener に定義された処理が実行されます。 --listener はイベントハンドラ関数で、イベントオブジェクト... --この形式では、listener に独自の引数を渡すことはできませ... -5) addEventListener を使う３ element.addEventListener( 'click', function(){ listener... --クリックで listener に定義された処理が実行されます。 --この書き方では、listenerに引数を持たせることができます。 -6) addEventListener を使う４ element.addEventListener( 'click', listenerObject, fal... --クリックで listenerObject の handleEvent に定義された処... --listenerObject は EventListener インタフェースを実装す... ~ ***事例 4), 5) の listener とは -指定された型のイベントが発生するときに、通知を受け取るコ... -listener 関数は、イベントオブジェクトを引数として持ちま... ~ ***事例 6) の listenerObject とは listenerObject は イベントリスナーインタフェースを実装す... function myFunction(event) { ： let n = this.number; ← 引数として渡された i の値が... 　： } element.addEventListener( 'click', { number : i , handleEvent :myFunction }, false); 参考：6) の方法を使ったサンプル ＞ [[JavaScript/ImageSwit... ~ ***イベントオブジェクトとは イベントが発生した際、listener（登録したコールバック関数... function myFunction( event ){ alert(event.target.id); } element.addEventListener( 'click', myFunction, false); イベントオブジェクトからは以下のような情報が取得できます。 |プロパティ名|説明|h //|event.currentTarget|イベントハンドラを登録した要素| |event.target|イベントが発生したDOM要素| |event.target.id|ID名| |event.target.className|クラス名| |event.target.innerHTML|HTML要素| |event.target.style|要素のスタイル| |event.target.childNodes|子要素| |event.target.parentNodes|親要素| |event.target.nextElementSibling|次の要素| |event.type|イベントの種類を表す文字列| |event.screenX / event.screenY|モニタ画面上の座標| |event.pageX / event.pageY|モニタ画面上の座標| |event.clientX / event.clientY|ウインドウ上の座標| |event.offsetX / event.offsetY|要素上の座標| |event.target.offsetWidth / event.target.offsetHeight|幅... |event.timeStamp|イベント発生までの経過時間(ミリ秒)| //|event.isTrusted|イベントがユーザーの操作によって発生し... |event.eventPhase|イベントのフェーズ| //|event.bubbles|イベントがバブリングするかどうか| //|event.cancelable|イベントがキャンセル可能かどうか| ~ ***イベント伝搬について ひとつの要素をクリックすると clickイベントが生成されます... -イベントバブリングフェーズ addEventListener()の３番目のパラメータが false（デフォル... element.addEventListener( 'click', listener, false ) element.addEventListener( 'click', listener ) 以下の図をご覧ください。 https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow... 引用元：https://www.w3.org/TR/DOM-Level-3-Events/ -イベントターゲットフェーズ イベントターゲットに登録されたすべてのリスナーが capture... -イベントキャプチャーフェーズ addEventListenerの３番目のパラメータが trueのケース element.addEventListener( 'click', listener, true ) ~ ***イベント一覧資料 -MDN イベントリファレンス https://developer.mozilla.org/ja/docs/Web/Events -UI Events：W3C Working Draft, 04 August 2016 https://www.w3.org/TR/DOM-Level-3-Events/ ~ ~ **APPENDIX ***モバイル特有のイベント -touchstart -touchend -touchmove -touchcancel -touchenter -touchleave ~ ***レスポンシブなサイトを作る際の考え方（jQuery） とりあえず、PCのマウスのホバーにあたるものがスマホでは存... -デバイスがタッチイベントに対応するか否かを判定し、 touch... var event = 'ontouchstart' in window ? 'touchstart' : 'c... $('.button').on(event, function() { // ここに処理; }); ただしこの方法は、タッチとクリックの両方に反応する Window... ~ -touch 系は使わずシンプルに click のみで設計するのもあり... 上記の使い分けは、clickイベントだと反応が遅い（ touchend ... ~ ~

ページ名: