jQuery学習ノートのjQueryのイベント
2147 ワード
一.イベントバインド1.イベントバインド関数イベントのバインド関数は次の形式である.bind(type[,data],fn)type:clickのようなタイプ.....data:パラメータfn:イベント実行の関数例
二.合成イベント1.イベントをマウスでスライド
.hover(enter,leave)
Enter:マウスカーソルがオブジェクトに移動したときにトリガーされる関数
leave:マウスカーソルがオブジェクトから移動してトリガーされる関数
例:
2.連続クリックイベント
.toggle(fn1,fn2.......,fnN)
fn:1回目のfn 1、2回目のfn 2をクリックします.
三.イベントバブルイベントは常に内層から実行され、最外層まで実行され、そのオブジェクトをクリックしないで、このオブジェクトを含むすべてのオブジェクトにバインドされたイベントが実行されます.これは私たちが見たくないことです.jQueryはイベントの実行を阻止する方法を定義しました.
1.イベントオブジェクトの取得
イベントオブジェクトを取得する方法は、イベント実行関数にパラメータを追加することです.
$(#id1).click(function(even){});//evenは取得したイベントオブジェクトです
2.発疹を防ぐ
イベント実行関数にこのようなコードを追加して、イベントのバブルを阻止することができます.
even.stopPropagation();
3.デフォルトイベントのブロック
ブラウザのデフォルトイベントとは、ボタンをクリックしてコミットしたり、リンクをクリックしてリンクを開くなど、jQueryはこれらのデフォルトイベントの実行を阻止することもできます
even.preventDefault();
四.イベントオブジェクトのプロパティevenを取得します.type();//イベントのタイプを取得し、
次のようになります.
$(#id1).click(function(even){
alert(even.type);
return false;
});//「click」を返します.
even.target();//トリガーされたイベントのオブジェクトの取得
even.while();マウスクリックの1=左、2=中、3=右クリック
五.イベントを削除します.unbind(type [,data]);
例:
六.その他の操作1.複数のイベントをバインド
.bind(type [,data],fn).bind(type [,data],fn)...... ;
.bind(type type..... [,data],fn) ;
2.イベントネーミングスペースの追加
.bind(type.namespace [,data],fn) ;
$(#id 1)などのネーミングスペースを指定するだけで使用できます.unbind(".namespace")
$(function(){
$(#id1).click(function(){
$(#id2).show();//id2
}) ;
});
二.合成イベント1.イベントをマウスでスライド
.hover(enter,leave)
Enter:マウスカーソルがオブジェクトに移動したときにトリガーされる関数
leave:マウスカーソルがオブジェクトから移動してトリガーされる関数
例:
$(function(){
$(#id1).hover(function(){
$(#id2).show();//id2
},function(){
$(#id2).hide();//id2
}) ;
});
2.連続クリックイベント
.toggle(fn1,fn2.......,fnN)
fn:1回目のfn 1、2回目のfn 2をクリックします.
三.イベントバブルイベントは常に内層から実行され、最外層まで実行され、そのオブジェクトをクリックしないで、このオブジェクトを含むすべてのオブジェクトにバインドされたイベントが実行されます.これは私たちが見たくないことです.jQueryはイベントの実行を阻止する方法を定義しました.
1.イベントオブジェクトの取得
イベントオブジェクトを取得する方法は、イベント実行関数にパラメータを追加することです.
$(#id1).click(function(even){});//evenは取得したイベントオブジェクトです
2.発疹を防ぐ
イベント実行関数にこのようなコードを追加して、イベントのバブルを阻止することができます.
even.stopPropagation();
3.デフォルトイベントのブロック
ブラウザのデフォルトイベントとは、ボタンをクリックしてコミットしたり、リンクをクリックしてリンクを開くなど、jQueryはこれらのデフォルトイベントの実行を阻止することもできます
even.preventDefault();
四.イベントオブジェクトのプロパティevenを取得します.type();//イベントのタイプを取得し、
次のようになります.
$(#id1).click(function(even){
alert(even.type);
return false;
});//「click」を返します.
even.target();//トリガーされたイベントのオブジェクトの取得
even.while();マウスクリックの1=左、2=中、3=右クリック
五.イベントを削除します.unbind(type [,data]);
例:
$(function(){
$(#id1).bind("click",fn1=function(){alert(“ 1”);})
.bind("click",fn2=function(){alert(“ 2”);});
.bind("click",fn3=function(){alert(“ 3”);});
});
$("#id2").click(function(){
$(#id1).unbind("click",fn2);// fn2 click
});
六.その他の操作1.複数のイベントをバインド
.bind(type [,data],fn).bind(type [,data],fn)...... ;
.bind(type type..... [,data],fn) ;
2.イベントネーミングスペースの追加
.bind(type.namespace [,data],fn) ;
$(#id 1)などのネーミングスペースを指定するだけで使用できます.unbind(".namespace")