Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

jQueryのイベント処理（おまけでZen-Codingのサンプル）

jQuery Zen-Coding

概要

jQueryのイベントに処理を紐づける方法について。

書式

要素.event名(function)

サンプル概要

divタグの範囲をクリックすると、クリックした位置のX軸とY軸の座標を
ダイアログに表示します。

サンプルコード

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src='../js/jquery.js'></script>
    <script type="text/javascript">
    
    $(function() {
      $('#event_test').click(event_test_onclick);
    });

    var event_test_onclick = function event_test_onclick(e) {
      alert_xy_with_colon(e.pageX,e.pageY);
    }
    
    function alert_xy_with_colon(x,y) {
      alert(x + ':' + y);
    }
    
    </script>
    <style type="text/css">
    div#event_test {
      width:200px;
      height:50px;
      background-color:green;
    }
    </style>
  </head>
  <body>
    <div id="event_test">この範囲をクリックしてみてください</div>
  </body>
</html>

画面キャプチャ


ポイント

Zen-Coding HTMLサンプル

before

html>(head+(meta:utf)+(script[src=../js/jquery.js])+script+style)+body>div#event_test

after

<html>
	<head></head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript"></script>
	<style type="text/css"></style>
	<body>
		<div id="event_test"></div>
	</body>
</html>
Zen-Coding CSSサンプル

before

<style type="text/css">
  w
  h
  bgc
</style>


after

<style type="text/css">
div#event_test {
  width:;
  height:;
  background-color:#FFF;
}
</style>