先ほどまでbindの使い方について少し調べました。
(調査先は、jQueryリファレンスのbind)
簡単に言ってしまうと、イベントを貼り付けることができるみたいです。
さっそく、下記のプログラムを作成しました。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
$("#hoge").bind(
'click'
, function(){
alert("foo");
}
);
</script>
</body>
</html> |
上の場合、idのhogeにonclickイベントを追加しています。
実際に、idがhogeである要素(ここではボタンですが)がクリックされた場合、無名関数が起動し、fooという文言を出すように指示しています。
クリックイベント先の関数が長くなってしまう場合、当然、中出し、失礼、外出ししたい場合は、こんなように書き換えることができるのではないかと。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
function goaway(){
alert("take my breath away");
}
$("#hoge").bind(
'click'
, goaway
);
</script>
</body>
</html> |
確かに動きます。
リファレンスを少し眺めると、変数の引継ぎもできるようです。
(まー、これは、JavaScriptの仕様上、もともとできると思ったりもするのですが。)
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
var msg = "Jessica Simpson";
$("#hoge").bind(
'click'
, function(){
alert(msg);
}
);
</script>
</body>
</html> |
実行すると、Jessica Simpsonと表示されます。
これだとあまりにも素っ気無いのでbindメソッドの引数として渡すことも可能です。
それが次の例。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
var msg = "Tom Cruise";
$("#hoge").bind(
'click'
, {message:msg}
, function(event){
alert(event.data.message);
}
);
</script>
</body>
</html> |
第二引数に、JSONパラメータとして関数に渡したいパラメータの設定を行い、同時に、無名関数に引数名を指定して「引数名.data.JSONのkey」でパラメータにアクセスすることができます。
formの内容を確認したい場合などにこの方法は便利かもしれませんね。
そんな場合は、おそらくきっと、こんな感じになるのかなと。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<input type="text" id="baka" value="">
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
var msg = "Tom Cruise";
$("#hoge").bind(
'click'
, {validate:$("#baka")}
, function(event){
var temp = event.data.validate;
alert(temp.val());
}
);
</script>
</body>
</html> |
(これで、textの内容を取得することができるのですが、valメソッドがなんだかよくわかってない。。。まー推測はつくのですが。)
0 コメント:
コメントを投稿