jQueryのﾌﾟﾗｸﾞｲﾝ｢response.js｣を使用してのｺｰﾙﾊﾞｯｸ方法についてお世話になります｡今回jQueryのﾌﾟﾗｸﾞｲﾝである｢response.js｣を使用してｳｨﾝﾄﾞｳ幅によっ…

jQueryのﾌﾟﾗｸﾞｲﾝ｢response.js｣を使用してのｺｰﾙﾊﾞｯｸ方法について

お世話になります｡今回jQueryのﾌﾟﾗｸﾞｲﾝである｢response.js｣を使用してｳｨﾝﾄﾞｳ幅によって画像を変更するWEBｻｲﾄを作成しておりました｡

この｢response.js｣と｢response.js｣の公式ｻｲﾄhttp://responsejs.com/を活用しながて､ｳｨﾝﾄﾞｳをﾘｻｲｽﾞしたら alert("ﾘｻｲｽﾞしました｡") というﾌﾟﾛｸﾞﾗﾑを実行させたいと思っています｡

ｺｰﾙﾊﾞｯｸのような感じで何かあるかなと http://responsejs.com/#events の部分にそれらしい説明が書いてあると思うのですが､当方､英語が未熟な部分がございまして拝見してもEvents項目のｺｰﾙﾊﾞｯｸの仕方がわからない状況です｡

ｳｨﾝﾄﾞｳｻｲｽﾞを変更して上記のﾌﾟﾛｸﾞﾗﾑを実行させるにはどのようなｺｰﾄﾞの書き方をすれば良いのでしょうか？

こんな感じで書きます｡

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://airve.github.io/js/response/response.js"></script>
<!-- jquery と response.js を読み込んだ後に書く -->
<script>
Response.resize(function(e) {
 alert("ﾘｻｲｽﾞしました｡");
});
</script>

ﾊﾝﾄﾞﾗの中に書く処理によっては､以下のように書いた方が安心です｡

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://airve.github.io/js/response/response.js"></script>
<!-- jquery と response.js を読み込んだ後に書く -->
<script>
$(function() {
 Response.resize(function(e) {
 alert("ﾘｻｲｽﾞしました｡");
 });
});
</script>

ｺｰﾙﾊﾞｯｸを呼ぶのは jQuery の .on() ﾒｿｯﾄﾞを使って実装されているので､ﾊﾝﾄﾞﾗの引数には jQuery の Event ｵﾌﾞｼﾞｪｸﾄが指定されて､呼び出されます｡
http://api.jquery.com/category/events/event-object/

＃使うことはあまりないかもしれませんが｡

追記です｡
jsFiddle にｻﾝﾌﾟﾙを書いてみました｡
http://jsfiddle.net/a_kuma3/6TvEE/

alert() はうっとおしいので､console.log を使っています｡
ｲﾍﾞﾝﾄ発生の様子は､ﾌﾞﾗｳｻﾞの javascript のｺﾝｿｰﾙを開いて確認してみてください｡
ﾌﾚｰﾑやｳｨﾝﾄﾞｳのｻｲｽﾞを変える度に､resize に指定した関数の内容が実行されている様子が分かると思います｡

本来の jsFiddle の使い方だと､外部ｽｸﾘﾌﾟﾄのﾗｲﾌﾞﾗﾘは左側の領域から選んだり､javascript は左下の｢JavaScript｣ﾍﾟｲﾝに書いたりするのですが､ｿｰｽの見通しが良いように｢HTML｣ﾍﾟｲﾝにﾊﾞｻｯと書いてます｡