HyodaKazuaki/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
	</head>
	<body onclick="console.log('0');">
		<div onclick="console.log('1');">
			<p onclick="console.log('2');">test</p>
		</div>
		<script src="./main.js"></script>
	</body>
</html>

## main.js
// Public License
// ただし試験への、全ての無断転用を禁ずる

/**
* やりたいこと
*
* console.logには3だけを表示させ、それ以外は表示させたくない
*/

/**
* 解決策 手順1
*
*
* 内容：HTMLに書かれたonclickの処理を止める
*
* どうやって？：javascriptでは、onclickでクリックした際に処理を行うよう命令できた
*		しかし、onclickは1つの処理しか保持できないため、一般にはaddEventListenerを用いるよう説明された
*		今回の場合、すでにp要素に与えられているonclickは消すべき命令だが、addEventListenerを使用するとそれを消すことができない
*		よって、ここではonclickを用いることで、この処理を上書きしている
* 注意：この処理は匿名関数で記述しているが、別途関数を作成しそれを呼ぶようにしてもよい
*
* 具体行：50~55行目
*/

/**
* 解決策 手順2
*
*
* 内容：イベントの伝播を止める
*
* どうやって？：イベントバブリングについてもう一度おさらいしよう
*		javascriptには、子要素から親要素、または親要素から子要素へイベントが伝播するようになっている
*		子要素から親要素へ向かって伝播するものを「イベントバブリング」
*		親要素から子要素へ向かって伝播するものを「イベントキャプチャリング」
*		さて、ここで注意しておきたいことが2つある
*		・実行される順番は、addEventListenerで追加された処理に対し、HTMLに記述されたonclickの処理の方が優先される
*		・onclickはイベント伝播によらず、常に子要素から親要素へ向かって伝播する
*		ということである
*		今回の場合は予め手順1でonclickを上書きしているため、順番や伝播の向きに関しては特に心配する必要はない
*		では、今回はイベントバブリングで子から親への伝播を止めてみよう
*		伝播を止める方法は、ev.stopPropagation()である
*		これを、p要素elementのonclickで呼び出した所、またはaddEventListenerから呼び出せばよい
*
* 注意：実行される順番は「HTMLのonclick処理」→「javascriptのaddEventListenerで追加した処理」→「親のHTMLのonclick」→「親のjavascriptのaddEventListenerで追加した処理」...である
*	また、この処理に関しては2つの例を記述しており、onclick時にイベントオブジェクトを受け取るか、addEventListener時にイベントオブジェクトを受け取ることができるので、どちらかでstopPropagation()すればよい
*
* 具体行：50及び57~59行目
*/

var p = document.getElementsByTagName("p").item(0);

p.onclick = function(ev){
	console.log("3");
	ev.stopPropagation(); // ここと
};

p.addEventListener("click", function(ev){
	ev.stopPropagation(); // ここのどちらかを省略可能
}, false);
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	</head>
	<body onclick="console.log('0');">
	<div onclick="console.log('1');">
	<p onclick="console.log('2');">test</p>
	</div>
	<script src="./main.js"></script>
	</body>
	</html>
	// Public License
	// ただし試験への、全ての無断転用を禁ずる

	/**
	* やりたいこと
	*
	* console.logには3だけを表示させ、それ以外は表示させたくない
	*/

	/**
	* 解決策手順1
	*
	*
	* 内容：HTMLに書かれたonclickの処理を止める
	*
	* どうやって？：javascriptでは、onclickでクリックした際に処理を行うよう命令できた
	* しかし、onclickは1つの処理しか保持できないため、一般にはaddEventListenerを用いるよう説明された
	* 今回の場合、すでにp要素に与えられているonclickは消すべき命令だが、addEventListenerを使用するとそれを消すことができない
	* よって、ここではonclickを用いることで、この処理を上書きしている
	* 注意：この処理は匿名関数で記述しているが、別途関数を作成しそれを呼ぶようにしてもよい
	*
	* 具体行：50~55行目
	*/

	/**
	* 解決策手順2
	*
	*
	* 内容：イベントの伝播を止める
	*
	* どうやって？：イベントバブリングについてもう一度おさらいしよう
	* javascriptには、子要素から親要素、または親要素から子要素へイベントが伝播するようになっている
	* 子要素から親要素へ向かって伝播するものを「イベントバブリング」
	* 親要素から子要素へ向かって伝播するものを「イベントキャプチャリング」
	* さて、ここで注意しておきたいことが2つある
	* ・実行される順番は、addEventListenerで追加された処理に対し、HTMLに記述されたonclickの処理の方が優先される
	* ・onclickはイベント伝播によらず、常に子要素から親要素へ向かって伝播する
	* ということである
	* 今回の場合は予め手順1でonclickを上書きしているため、順番や伝播の向きに関しては特に心配する必要はない
	* では、今回はイベントバブリングで子から親への伝播を止めてみよう
	* 伝播を止める方法は、ev.stopPropagation()である
	* これを、p要素elementのonclickで呼び出した所、またはaddEventListenerから呼び出せばよい
	*
	* 注意：実行される順番は「HTMLのonclick処理」→「javascriptのaddEventListenerで追加した処理」→「親のHTMLのonclick」→「親のjavascriptのaddEventListenerで追加した処理」...である
	* また、この処理に関しては2つの例を記述しており、onclick時にイベントオブジェクトを受け取るか、addEventListener時にイベントオブジェクトを受け取ることができるので、どちらかでstopPropagation()すればよい
	*
	* 具体行：50及び57~59行目
	*/

	var p = document.getElementsByTagName("p").item(0);

	p.onclick = function(ev){
	console.log("3");
	ev.stopPropagation(); // ここと
	};

	p.addEventListener("click", function(ev){
	ev.stopPropagation(); // ここのどちらかを省略可能
	}, false);