課題【イベント操作】ーNo.09
課題内容
- ＜概要＞
- ２つのdivタグ（縦/横が200px）を用意しましょう。
- このdivタグは、
- 要素の境界がわかるように、
- 枠線をつけておきましょう。
- １つ目のdivタグの背景色は赤色に、
- ２つ目のdivタグの背景色は青色にしましょう。
- このdivタグに、
- マウスカーソルを当てた時には、
- 「XXにマウスカーソルが当たりました」
- （XXは「赤色」か「青色」を表示）
- という文字列を、
- マウスカーソルをdivタグから外した時、
- 「XXからマウスカーソルが外れました」
- （XXは「赤色」か「青色」を表示）
- という文字列を、
- アラートとコンソールに、
- それぞれ表示しましょう。
出力結果
表示としては、
このようなdivタグを表示します。
このあとは、
この赤色、青色のそれぞれに、
このように、
マウスカーソルを当てたり、外したりします。
マウスカーソルが当たっているか、
外れたかという点に関しては、
divタグの枠の中に、
（わかりやすく、背景を無くして説明します）
このようにマウスカーソルがあれば、
XXにマウスカーソルが当たりました
（XXは「赤色」か「青色」を表示）をコンソールに表示します。
そして、
上記の状況から、
このように、
枠外にマウスのカーソルが動いた時に、
コンソールに以下の表示を行います。
XXからマウスカーソルが外れました
（XXは「赤色」か「青色」を表示）ポイント（イベント操作）
DOMのイベント操作に関しては、
- 対象のDOM操作の要素を取得する
- 要素のイベントの処理を設定する
を行うことで、
イベントを操作することができます。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
イベント操作（要素にマウスカーソルが当たった時の操作）
イベント操作に関して、
「要素にマウスカーソルが当たった時の操作」
に関しては、
イベント操作の中でも、
「mouseenter」
を使って操作を行います。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
【イベント操作】要素にマウスカーソルが当たった時の操作を行う
イベント操作（要素にマウスカーソルが外れた時の操作を行う）
イベント操作に関して、
「要素にマウスカーソルが外れた時の操作を行う」
に関しては、
イベント操作の中でも、
「mouseleave」
を使って操作を行います。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="custom-div red"></div>
<div class="custom-div blue"></div>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>CSS
.custom-div {
width: 200px;
height: 200px;
border: 1px solid #000;
cursor: pointer;
}
.custom-div.red {
background-color: red;
}
.custom-div.blue {
background-color: blue;
}javaScript
// DOMを取得する(赤色）
let sampleRed = document.querySelector('div.red');
// DOMを取得する(青色)
let sampleBlue = document.querySelector('div.blue');
// イベント操作
sampleRed.addEventListener('mouseenter', event => {
// コンソールに表示
console.log('赤色にマウスカーソルが当たりました');
});
// イベント操作
sampleRed.addEventListener('mouseleave', event => {
// コンソールに表示
console.log('赤色からマウスカーソルが外れました');
});
// イベント操作
sampleBlue.addEventListener('mouseenter', event => {
// コンソールに表示
console.log('青色にマウスカーソルが当たりました');
});
// イベント操作
sampleBlue.addEventListener('mouseleave', event => {
// コンソールに表示
console.log('青色からマウスカーソルが外れました');
});初心者向けピックアップ
