半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録63日目

更新日:

こんにちは、こずえです。
プログラミング学習記録63日目です。
JavaScriptについて学習しました。

所感:読むのは簡単でも理解に落とし込むのは大変ですね。

合計学習時間

前回までの時間:126.25[h]
今回の時間:2.75[h]
合計時間:129.00[h]

学習内容

前回と同様に以下のサイトを読み進めていきました。

今回は「三章第一回 イベントプロパティ」から「三章第六回 mouseoverとmouseout」までを読みました。

以下自分まとめです。

時間が掛かったので、まとめは「三章第四回 イベントキャプチャリング」までとなります。

イベント

イベントプロパティ

インターフェイスの共通のイベントハンドラーとしてGlobal​Event​Handlersというものがあります。
以下はGlobal​Event​Handlersが持っているプロパティの抜粋です。

  • onclick:クリック時に発生するイベントプロパティ
  • onmouseover:マウスオーバー時に発生するイベントプロパティ
  • onload:読み込みが完了したときに発生するイベントプロパティ

これらのイベントプロパティに処理を定義することにより、アクションをトリガとした処理を行うことが可能です。

<p id="p1">onclick test</p>

<script type="text/javascript">

	function hello() {
		console.log('hello');
	}

	var p1 = document.getElementById('p1');
	p1.onclick = hello;
</script>

ただし、イベントハンドラーは1つの処理(関数)しか結びつけることができません。
また、プロパティであるため上書きが可能です。

イベントリスナ

イベントに対して処理を結びつけることによりアクションをトリガとした処理を行うことが可能です。

イベントハンドラとは異なり、処理が複数でも問題なく、上書きもされません。

イベントに対する処理の登録、削除を行うにはEventTargetインターフェイスのメソッドを使用します。

  • addEventListener
  • removeEventListener
<p id="p1">addEventListener test</p>
<p id="p2">removeEventListener test</p>

<script type="text/javascript">

	function hello() {
		console.log('hello');
	}

	function world() {
		console.log('world');
	}

	function removeWorld() {
		// イベントに対する処理を削除する
		p1.removeEventListener('click', world, false);
	}

	var p1 = document.getElementById('p1');
	var p2 = document.getElementById('p2');

	// イベントに対する処理を登録する
	p1.addEventListener('click', hello, false);
	p1.addEventListener('click', world, false);
	p2.addEventListener('click', removeWorld, false);
</script>

イベントバブリング

要素(今回はp)でイベントが発生すると、親の要素(今回はdiv, body)でもイベントが発生します。

<body id="hoge1">
	<div id="hoge2">
		<p id="hoge3">ppppp</p>
	</div>
	<script type="text/javascript">

		function hogeTagName() {
			console.log(this.tagName);
		}

		var body = document.getElementById('hoge1');
		var div = document.getElementById('hoge2');
		var p = document.getElementById('hoge3');

		body.addEventListener('click', hogeTagName, false);
		div.addEventListener('click', hogeTagName, false);
		p.addEventListener('click', hogeTagName, false);

	</script>
</body>

p要素でクリックイベントが発生した場合、p→div→bodyというように連鎖的に親のイベントが発生することになります。これをイベントバブリングといいます。

イベントフローとフェーズ

イベントのフローは以下のようになっています。

キャプチャフェーズ→ターゲットフェーズ→バブリングフェーズ

以下UI Eventsより引用したイベントフローの図になります。

Graphical representation of an event dispatched in a DOM tree using the DOM event flow

参考資料

以下は「JavaScript初級者から中級者になろう — uhyohyo.net」以外の参考資料になります。

-プログラミング, 学習, 記録
-, ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.