プログラミング独学方法毎日コツコツ!JavaScriptの勉強 イベントリスナー 

Programming

イベントリスナー
イベントリスナーの目的は何かの行動を起こしたら何かを動作させる

okボタンを作成

index.html

<!DOCKTAYPE html>

<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Basics</title>
</head>
<body>
<button>ok</button>
<script src =”js/main.js”></script>
</body>
</html>
main.js

‘use strict’;
{
const button = document.querySelector(‘button’);
button.addEventListener(‘click’,() => {
console.log(‘clicked!’);
});

}

タイトルなし

okボタンを押した後 メッセージが表示される

タイトルなし

イベントオブジェクト
マウスの座標軸を求める

index.html

<!DOCKTAYPE html>

<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Basics</title>
</head>
<body>
<div></div>//マウスを動かしたときの範囲指定
<script src =”js/main.js”></script>
</body>
</html>
main.js

‘use strict’;
{
const div = document.querySelector(‘div’);
document.addEventListener(‘mousemove’,e => {
div.textContent = `${e.clientX}:${e.clientY}`
});
}

マウスの座標軸が表示されている

タイトルなし

**preventDefault

リンクをクリックしたら表示させるようにする

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Basics</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<p>Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy. <span class=”hidden”>Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy.Happy </span><a href=””>read more …</a></p>
<script src=”js/main.js”></script>
</body>
</html>
//<spanclass=”hidden”>の部分が非表示になっている

タイトルなし
main.js

‘use strict’;
{
const a = document.querySelector(‘a’);
const span = document.querySelector(‘span’);
a.addEventListener(‘click’, e => {
e.preventDefault();
a.classList.add(‘hidden’);
span.classList.remove(‘hidden’);
});
}
タイトルなし

イベントリスナーの使い方はMDNで詳しく調べる事が出来る。

今日の勉強はこれぐらいです、少し難しかったですががんばります。それではまた( ´∀`)つ

コメント

Translate »