JavaScriptの練習：イベント
元ネタのMDNはこちら。
成果物はこちら。
ここでは、イベントについての説明です。イベントのキャッチ方法とか、どうやって関数を呼び出すかなどの説明です。
個人的には、<body>の中に、こうやってタイル状に<div>を配置できることを知った驚きのほうが大きかったです。
<!-- Learn about this code on MDN: https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Useful event target example</title>
<style>
div {
height: 100px;
width: 25%;
float: left;
}
</style>
</head>
<body>
<p><button>MSG</button><button onclick="location.reload()">reset</button></p>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('Hello, this is one of event handlers.');
});
for (var i = 1; i <= 16; i++) {
var myDiv = document.createElement('div');
myDiv.style.backgroundColor = bgChange();
document.body.appendChild(myDiv);
}
function random(number) {
return Math.floor(Math.random()*number);
}
function bgChange() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ','
+ random(255) + ')';
console.log(rndCol);
return rndCol;
}
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].onclick = function(e) {
e.target.style.backgroundColor = bgChange();
}
}
</script>
</body>
</html>