今回は、今までご紹介していない、様々なイベントについて見ていきます。
簡単な紹介になりますが、それぞれ使用する機会はあると思いますので、しっかりと学習していきましょう。
focus と blur
「focus」は、要素がフォーカスを受け取った時、「blur」は要素がフォーカスを失った時に発生します。
<div class="fo">
<input
type="email"
placeholder="メールアドレスを入力してください"
id="testmail"
/>
</div>
<div id="message"></div>
let mail = document.getElementById('testmail');
mail.addEventListener('blur', function () {
if (!mail.value.includes('@')) {
mail.classList.add('notmail');
message.innerHTML = '正しいメールアドレスを入力してください。';
}
});
mail.addEventListener('focus', function () {
if (this.classList.contains('notmail')) {
this.classList.remove('notmail');
message.innerHTML = '';
}
});
「メールアドレスを入力してください」という部分に、メールアドレスを入力しないと、下のボックスに「正しいメールアドレスを入力してください。」と表示されます。
再びメールアドレスを記載しようとボックスをクリックすると、下のメッセージは空になります。
最初に、「blur」を使っていますので、メールアドレスのボックスから出るときが、フォーカスから出る時になっています。
再びメールアドレスを記入する時は、「focus」を使っていますので、フォーカスした時に、「notmail」というクラスが設定されていれば、そのクラスを削除して、下のボックスを空にしています。
もう一つ例を見てみましょう。
<div class="fo">
<input
type="password"
placeholder="6桁のパスワードを入力"
id="checkpass"
/>
</div>
let pass = document.getElementById('checkpass');
pass.addEventListener('focus', function (e) {
e.target.style.backgroundColor = '#ff99cc';
});
pass.addEventListener('blur', function (e) {
e.target.style.backgroundColor = '';
});
パスワードの入力画面ですが、ボックスをクリックすると、フォーカスされるので、背景色が変わります。
また、ボックスから離れると、フォーカスから出ますので、背景がなしになっています。
「focus」イベントは一部の要素、button、input、select、a などでしか使用することが出来ません。
その他の要素で使用する時は、HTML属性の「tabindex」を使用すると、「focus」を使用出来るようになります。
MDN : tabindex
「focus, blur」はバブリングしませんが、バブリングを必要とする時は、「focusin, forcusout」を使います。
基本的な機能はどちらも同じです。
change
「change」は、inputなど、ユーザーの操作によって値の変更が確定した時に発生します。
<div class="box">
<label class="choice"
>好きなフルーツを選択してください。
<select class="fruits" name="fruits">
<option value="">以下から選んでください。</option>
<option value="banana">バナナ</option>
<option value="apple">りんご</option>
<option value="strawberry">いちご</option>
<option value="orange">オレンジ</option>
</select>
</label>
</div>
<div class="result"></div>
let fruitsChoice = document.querySelector('.fruits');
fruitsChoice.addEventListener('change', function () {
let result = document.querySelector('.result');
result.textContent =
fruitsChoice.options[fruitsChoice.selectedIndex].textContent +
'は人気のフルーツです!';
});
選択メニューで値を変更すると、イベントが発生します。
input
「input」は値が変更された時に発生するイベントです。
先程の「change」と少し似ていてますが、「input」はテキストが１文字でも入力されるたびに、イベントが発生します。
<div class="input">
<label for="put"
>好きなフルーツの名前
<input type="text" id="put" />
</label>
</div>
<div class="out"></div>
let inPut = document.getElementById('put');
inPut.addEventListener('input', function (e) {
let outPut = document.querySelector('.out');
outPut.innerHTML = e.currentTarget.value;
console.log(e.currentTarget.value);
});
ボックス内に好きなフルーツの名前を入力します。
コンソールを見ていただくと、以下のようになっています。
s st str stra straw strawb strawbe strawber strawberr strawberry strawberr strawber strawbe strawb straw stra str st s
「strawberry」と入力して、削除しています。
文字を入力、削除してもイベントが発生しているのが分かります。
cut/copy/paste
「cut/copy/paste」、それぞれの操作を行った時に発生するイベントです。
<div class="text">
<textarea name="copy" id="paste" cols="30" rows="10"></textarea>
</div>
let textArea = document.getElementById('paste');
textArea.addEventListener('cut', () => {
alert('Cut');
});
textArea.addEventListener('copy', () => {
alert('Copy');
});
textArea.addEventListener('paste', () => {
alert('Paste');
});
ボックス内で、コピー、ペースト、カットのどれかの操作を行うとアラートが表示されます。
load / DOMContentLoaded
「load」は、ページのすべての読み込みが完了したときに発生し、「DOMContentLoaded」は、DOMツリーの構築が完了したときに発生するイベントです。
window.addEventListener('load', () => {
console.log('load');
});
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded');
});
DOMContentLoaded
load
コンソールを見ていただくと、「DOMContentLoaded」が最初に発生していて、「load」が後で発生しているのが分かると思います。
あとがき
様々なイベントについてご紹介させて頂きました。
その他のイベントもたくさんありますが、実際に出てきた時に覚えていけば良いと思います。
今回も最後までお読み頂きありがとうございました。
