Learn : JavaScript Event

2019/10/24(Thu) - 17:17

Lodashとは

Lodash とは、 A modern JavaScript utility library delivering modularity, performance & extras.という名前の通り、配列を操作したり、抽出したり、オブジェクトに変換したり、が簡単にできるライブラリ。

Event / EventHandler(EventListener)

Webアプリケーション上でボタンをクリックしたりマウスオーバーしたりする動作を「イベント」と呼び、この「イベント」に対して動作させる処理(関数)を「イベントハンドラー OR イベントリスナー」と呼ぶ。

イベントの種類に関しては下記

イベントに対応した処理の記述法保うは下記。

  1. HTML要素の属性に対してイベントハンドラーの実装
  2. DOM要素のプロパティにイベントハンドラーを指定
  3. イベントリスナー

1. HTML要素の属性に対してイベントハンドラーの実装

<div class="hoge" onclick="window.alert('HOGE')"></div>

2. DOM要素のプロパティにイベントハンドラーを指定

<div class="hoge" onclick="showMessage()"></div>
 
<script>
function showMessage(){
	window.alert('HOGE');
}
<script>

3. イベントリスナー

<div class="hoge"></div>
 
<script>
window.onload = function() {
	var obj = document.getElementByClassName('hoge');
 
	obj.onclick = function(){
		window.alert('HOGE');
	}
} 
</script>

イベントリスナーの特徴として、JavaScriptのコードとHTMLのコードが混在していないため疎結合なコードとなっている。

<div class="hoge"></div>
 
<script>
window.onload = function() {
	var obj = document.getElementByClassName('hoge');

	function hoge(){
		window.alert('HOGE');
	}
	
	function fuga(){
		window.alert('FUGA');
	}
		
	obj.addEventListener( 'click', hoge, false );
	obj.addEventListener( 'click', fuga, false );
}
 
</script>

上記のようにaddEventListenerでイベントをwindowObjectに登録した場合、hogefugaの関数が実行される。

また、addEventListenerは、第1引数にはイベント名、第2引数には呼び出したい関数名、第3引数にはイベント伝搬の設定(通常はfalseでOK)を指定する。

dispatchEvent

dispatchEventは、特定の EventTarget に Event をディスパッチ(発送/派遣)して影響する EventListener を適切な順序で呼び出すことができる。

EventTargetのメソッドであり、要素に対して任意のイベントを実行する事が可能

<div class="hoge">Button</div>
 
<script>
// 要素の取得
const element = document.getElementByClassName( "hoge" ) ;

// Eventを作成
const event = new MouseEvent( "click" ) ;

// 要素にEventを発生させる
element.dispatchEvent( event ) ;
</script>

カテゴリ