この記事の内容について
フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。
JavaScript 基礎編
JavaScript 応用編
イベント
イベントを設定する
要素.addEventListenner(イベント名, 関数名);
様々なイベント
Clickイベント
ボタンをクリックするとアラートを表示する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button type="button">ボタン</button>
<script>
function alertMessage() {
alert('ボタンをクリックしました');
}
const btn = document.querySelector('button');
btn.addEventListener('click', alertMessage);
</script>
</body>
</html>
inputイベント
フォームを入力するとイベントが発生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text">
<div class="content">
<p>入力内容を表示する</p>
</div>
<script>
const input = document.querySelector('input');
input.addEventListener('input', function (event) {
const newElement = document.createElement('p');
newElement.textContent = event.currentTarget.value;
const content = document.querySelector('.content');
content.append(newElement);
})
</script>
</body>
</html>
チェックボックスを選択するとイベントが発生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="radio" name="gender" value="男性" class="radio">男性
<input type="radio" name="gender" value="女性" class="radio">女性
<div class="content">
<p>入力内容を表示する</p>
</div>
<script>
const radios = document.querySelectorAll('.radio');
for (let radio of radios) {
radio.addEventListener('input', function (event) {
const newElement = document.createElement('p');
const value = event.currentTarget.value;
newElement.textContent = `${value}がチェックされました`;
const content = document.querySelector('.content');
content.append(newElement);
})
}
</script>
</body>
</html>
セレクタを設定するとイベントが発生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<select class="select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="content">
<p>入力内容を表示する</p>
</div>
<script>
const select = document.querySelector('.select');
select.addEventListener('input', function (event) {
const value = event.currentTarget.value;
const newElement = document.createElement('p');
newElement.textContent = `${value}が選択されました`;
const content = document.querySelector('.content');
content.append(newElement);
})
</script>
</body>
</html>
keydown / keyupイベント
キーを押すとイベントが発生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text">
<div class="content">
<p>入力内容を表示する</p>
</div>
<script>
const input = document.querySelector('input');
input.addEventListener('keydown', function (event) {
const newElement = document.createElement('p');
newElement.textContent = `タイプされたkey:${event.key}`;
const content = document.querySelector('.content');
content.append(newElement);
})
</script>
</body>
</html>
mousemove / mousedown / mouseupイベント
マウスを動かすとイベントが発生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="width: 200px; height: 100px; background: pink;"></div>
<p>このテキストが変わります</p>
<script>
const div = document.querySelector('div');
const text = document.querySelector('p');
div.addEventListener('mousemove', function (event) {
text.textContent = `Move:x = ${event.offsetX}, y = ${event.offsetY}`;
});
div.addEventListener('mousedown', function (event) {
text.textContent = `Down:x = ${event.offsetX}, y = ${event.offsetY}`;
});
div.addEventListener('mouseup', function (event) {
text.textContent = `Up:x = ${event.offsetX}, y = ${event.offsetY}`;
});
</script>
</body>
</html>
scrollイベント
画面をスクロールするとイベントが発生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.content {
height: 5000px;
}
.text {
position: fixed;
}
</style>
</head>
<body>
<div class="content">
<p class="text">スクロール量が表示されます</p>
</div>
<script>
window.addEventListener('scroll', function (event) {
const p = document.querySelector('.text');
p.textContent = `スクロール量は${window.scrollY}pxです`;
});
</script>
</body>
</html>
イベント発生元の要素にアクセスする
ボタンをクリックするとテキストが変わるWebページ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button type="button">ボタン</button>
<script>
const button = document.querySelector('button');
button.addEventListener('click', function (event) {
const button = event.currentTarget;
button.textContent = '変更します';
});
</script>
</body>
</html>
currentTargetとtargetの違い
- currentTarget
→ addEventListenerを設定した要素 - target
→ 設定したイベントが発生した要素
currentTargetとtargetの違い
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button type="button">
<span>span要素です</span>
button要素です
</button>
<script>
const button = document.querySelector('button');
button.addEventListener('click', function (event) {
console.log(event.currentTarget);
console.log(event.target);
});
</script>
</body>
</html>
要約
常にイベント設定した要素を取得したい
→ currentTargetを使う！！
実際にイベントが発生した要素を取得したい
→ targetを使う！！
「通常であればcurrentTargetの方が使いやすい」
規定の動作を停止する
イベントオブジェクト.preventDefault();
ページ遷移時、動作を停止して確認をするWebページ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href="https://example.com">リンク</a>
<script>
function confirmLink(event) {
if (confirm('ページ遷移をしますか？')) {
console.log('実行しました');
} else {
event.preventDefault();
console.log('キャンセルしました')
}
}
const link = document.querySelector('a');
link.addEventListener('click', confirmLink);
</script>
</body>
</html>