<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function(){ $("h1").click(function(){ alert("h1要素がクリックされました"); }); $("p").click(function(){ alert("p要素がクリックされました"); }); $("input").click(function(){ alert("input要素がクリックされました"); }); $("img").click(function(){ alert("img要素がクリックされました"); }); }); </script> <style> h1,p,input,img{ width:200px; height:200px; line-height:200px; text-align:center; font-size:20px; cursor:pointer; border:1px solid grey; margin:10px; display:block; } </style> </head> <body> <h1>h1要素</h1> <p>p要素</p> <input type="button" value="input要素"> <img src="img/200x200.png"> </body> </html>