2014/04/10

【JavaScript】ウェブサイト制作の際によく使うイベントまとめ

【JavaScript】ウェブサイト制作の際によく使うイベントまとめ

JavaScriptを使ってプログラムを作成する際に,イベント発生時に処理を行うことが多いと思います.

そこで今回は,よく利用するイベントとイベントリスナーの設定方法をまとめました.

目次

イベントとサンプルコード

要素がクリックされた場合

var element = document.getElementById("ID名");
element.addEventListener("click",function(event){
//処理の内容
});

ダブルクリックの場合は"dbclick"と指定します.

いずれかのキーが押された場合

document.body.addEventListener("keydown",function(event){
//処理の内容
});

要素にマウスカーソルが乗った場合

var element = document.getElementById("ID名");
element.addEventListener("mouseover",function(event){
//処理の内容
});

要素からマウスカーソルが外れた場合

var element = document.getElementById("ID名");
element.addEventListener("mouseout",function(event){
//処理の内容
});

要素がフォーカスされた場合

var element = document.getElementById("ID名");
element.addEventListener("focus",function(event){
//処理の内容
});

フォーカスが外れた場合は"blur"を指定します.

右クリックされた場合

var element = document.getElementById("ID名");
element.addEventListener("contextmenu",function(event){
//処理の内容
});

要素がカット/コピー/ペーストされた場合

var element = document.getElementById("ID名");
element.addEventListener("cut",function(event){
//処理の内容
});

カットの場合は"cut",コピーの場合は"copy",ペーストの場合は"paste"とそれぞれ指定します.

要素がドラッグ開始/ドラッグ中/ドラッグ終了された場合

var element = document.getElementById("ID名");
element.addEventListener("dragstart",function(event){
//処理の内容
});

ドラッグ開始の場合は"dragstart",ドラッグ中の場合は"drag",ドラッグ終了の場合は"dragend"をそれぞれ指定します.

ページの読込が完了した場合

window.addEventListener("load",function(event){
//処理の内容
});

DOMの構築が完了した場合

window.addEventListener("DOMContentLoaded",function(event){
//処理の内容
});

ページがスクロールされた場合

window.addEventListener("scroll",function(event){
//処理の内容
});

メディアクエリが変化した場合

window.matchMedia("(クエリ文字列)").addListener(function(){
//処理の内容
});

まとめ

これらを覚えておくだけでだいたいのイベントには対応できると思います.

jQueryを使用した場合のイベント毎の処理方法は記述が異なるので,次回以降に紹介したいと思います.