こんにちは。
今回はVanilla JSで実務でもよく使うclickなどのイベント処理について簡単にまとめていきます。
イベント処理の登録にはaddEventListener()を使います。
addEventListener()とは
addEventListener()とはクリックなどイベント処理を行いたい時に使うメソッドです。
例えば、スクロールをしたら・要素をクリックしたら・ページの読み込みが完了した時などに使います。
addEventListener()の使い方
では早速、使い方について書いていきます。
イベントの対象要素.addEventListener('イベントの種類', () => {
/* 処理の内容 */
});イベントの対象要素には、getElemenyByIdなどで要素を取得して変数に入れて指定します。
イベントの種類には、clickやscrollなど発生させてたいイベントを指定します。
例えば、buttonをクリックしたら何か処理をしたい場合で書くと
/* buttonというidを付与しているbuttonタグを習得 */
const btn = document.getElementById('button');
/* 上記で取得した要素にイベント処理を書く */
btn.addEventListener('click', () => {
/* btnをクリックするとアラートを表示 */
alert();
});こんな感じで書きます。
実務でよく使うイベント処理があるので次にまとめておきます。
よく使うイベント処理
実務でよく使っているイベント処理をまとめておきます。
DOMcontentLoaded
DOM（HTML）が読み込まれたら、処理してくれるイベント。
document.addEventListener('DOMContentLoaded', () => {
/* 処理の内容 */
}load
DOMcontentLoadedはHTMLのソースが読み込み後の処理でしたが、loadはスタイルシートや画像などリソースも全て読み込まれた後に処理してくれるイベントです。
window.addEventListener('load', () => {
/* 処理の内容 */
}click
要素をクリックすると処理してくれるイベント。
/* イベントの対象処理をelとしています。 */
el.addEventListener('click', () => {
/* 処理の内容 */
});scroll
スクロールすると処理してくれるイベント。
window.addEventListener('scroll', () => {
/* 処理の内容 */
});hover
要素にマウスカーソルをホバーすると処理してくれるイベント。
/* イベントの対象処理をelとしています。 */
el.addEventListener('mouseenter', () => {
/* マウスがホバーした時の処理の内容 */
});
el.addEventListener('mouseleave', () => {
/* マウスが離れた時の処理の内容 */
});実務でも使っているのですが、まずはこれだけのイベント処理を覚えておけば良さそうです。
以上。
コメント