jQuery処理ページの詳細説明 events_jquery

イベント処理への JavaScript の導入については、前回の dom 操作で説明しました。ブラウザごとにイベントの処理方法が異なるため、開発者にとって不要な問題が発生しますが、jQuery を使用するとこの問題が簡単に解決されます。

1. バインドイベント監視

(http://www.jb51.net/article/60096.htm) では、イベント モニタリングについて詳しく説明し、イベント モニタリングの処理における iE と DOM 標準ブラウザの違いについて説明しました。複数のリスニング イベントを実行する順序と方法も異なります。

jQuery では、bind() によるイベントのバインディングは、IE ブラウザのattachEvent() および標準 DOM の addEventListener() に相当します。以下の例:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(function() {
$("img")
.bind("クリック", function() {
を通して })
.bind("クリック", function() {
$（ "＃show"）。append（ "＆lt; div＆gt;クリックイベント2＆lt;/div＆gt;"）;
})
.bind("クリック", function() {
を通して });
});
                                                                                         

                                                                                                                                                                                                                

上記のコードは、3 つのクリック リスニング イベントを img にバインドします。

bind() の一般的な構文は

です。

バインド(イベントタイプ,[データ],リスナー) このうち、eventType はイベントのタイプで、blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown になります。 /keypress/keyup/error

data はオプションのパラメータで、リスニング関数で使用する特別なデータを渡すために使用されます。リスナーはイベントリスニング関数です。上記の例では、匿名関数が使用されています。

複数のイベント タイプで同じリスニング関数を使用する場合は、それを同時にeventTypeに追加し、スペースを使用してイベントを区切ることができます。

コードをコピーします

コードは次のとおりです: $(function() { $("p").bind("mouseenter Mouseleave", function() { $(this).toggleClass("over")

})

});



その他の特殊なイベント タイプの中には、イベント名をバインディング関数として直接使用し、パラメーターをリッスン関数として受け入れることができるものもあります。たとえば、以前に繰り返し使用された

コードをコピー

コードは次のとおりです:

$("p").click(function(){
//クリックイベントリスニング関数を追加
})

このうち、共通の構文は

です。

イベントタイプ名(fn)
使用可能なeventTypeNamesには

が含まれます

ぼかし/フォーカス/ロード/サイズ変更/スクロール/アンロード/クリック/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
キーダウン/キープレス/キーアップ/エラーなど

bind() に加えて、jQuery はイベントをバインドするための非常に実用的な one() メソッドも提供します。このメソッドは一度バインドされると自動的に削除され、有効になりません。

コードをコピーします コードは次のとおりです:

//最初に 10 個の

ブロックを作成します
for (var i = 0; i $(document.body).append($("

Click
Me!

"));
var iCounter = 1;
//
ごとに 1 つずつクリック イベントを追加します $("div").one("click", function() {
$(this).css({
背景: "#8f0000",
色: "#FFFFFF"
}).html("クリックされました!
" (iCounter));
});

たとえば、上記の例では、10 個の div を作成し、各 div に関数イベントをバインドします。div ブロックをクリックすると、関数は 1 回実行され、その後実行されなくなります。

2. イベントリスナーを削除します

jQuery は unbind() を使用してイベントを削除します。このメソッドは 2 つのオプション関数を受け入れることができますが、パラメータを設定することはできません。たとえば、次のコードは div タグのすべてのイベントと P タグのすべてのクリック イベントを削除することを意味します。

コードをコピーします コードは次のとおりです:

$("p").unbind("click");
$("div").unbind();

指定したイベントを削除する場合は、unbind(eventType,listener) メソッドの 2 番目のパラメーターを使用する必要があります。例:

コードをコピーします コードは次のとおりです:

var myFunc = function() {
//リスニング関数本体
};
$("p").bind("click",myFunc);
$("p").unbind("click",myFunc);

たとえば、次のコード

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(function() {
var fnMyFunc1; //関数変数
$("img")
.bind("click", fnMyFunc1 = function() { //関数変数に代入
を通して })
.bind("クリック", function() {
$（ "＃show"）。append（ "＆lt; div＆gt;クリックイベント2＆lt;/div＆gt;"）;
})
.bind("クリック", function() {
を通して });
$("input[type=button]").click(function() {
$（ "img"）。unbind（ "click"、fnmyfunc1）; });
});
                                                                                         


                                                                                                                                                                                                                


たとえば、上記のコードでは、fnMyFunc1 関数 binding() が追加され、バインド時に匿名関数がそれに割り当てられるため、unbind() 関数呼び出し名として機能します。

3. イベントオブジェクトを渡します。

http://www.jb51.net/article/60096.htm
オブジェクトの概念を紹介し、イベント オブジェクトの一般的に使用される属性とメソッドを分析します。イベント オブジェクトが使用されていることがわかります。ブラウザーごとにタイマー間には多くの違いがあります。jQuery では、時間オブジェクトは唯一の方法でイベント リスナー関数に渡されます。

コードをコピーします

コードは次のとおりです: <スクリプトタイプ="text/javascript"> $(function() { $ ("P").Bind ("click", function (e) {// イベント オブジェクト E

を渡します。 var sPosPage = "(" e.pageX "," e.pageY ")";

var sPosScreen = "(" e.screenX "," e.screenY ")";
$("span").html("
ページ: " sPosPage "
画面: " sPosScreen);
});
});
                                                                                         

ここをクリック

                                                                               

上記のコードは、マウス クリック イベント リスニング関数を p にバインドし、イベント オブジェクトをパラメーターとして渡して、マウス イベント トリガー ポイントの座標値を取得します。

イベントの属性とメソッドに関して、jQuery の最も重要な仕事は、開発者にとって一般的に使用される属性とメソッドの互換性の問題を解決することです。

プロパティの説明
altKey alt キーが押された場合は true、押されていない場合は false
ctrlKey Ctrl キーが押されている場合は true、押されていない場合は false
SHIFTKEY SHIFT キーが押されていれば true、押されていない場合は false
keyCode keyup および keydown イベントの場合、キーの値を返します (つまり、a と A の値は同じで、両方とも 65)
pageX、pageY クライアント上のマウスの位置（ツールバー、スクロールバーなどを除く）
関連ターゲット
マウス イベントは、マウス ポインタが要素に出入りするときに発生します。

screenX、screenY 画面全体におけるマウスの位置。
target イベントを引き起こした要素/オブジェクト
type クリック、マウスオーバーなどのイベントの名前。
どのキーボード イベントがボタンの Unicode 値を表し、マウス ボタンがマウス ボタン (1 左ボタン、2 中央ボタン、3 右ボタン) を表します
stopPropagation() は、イベントが上方にバブリングするのを防ぎます。
PreventDefault() はイベントのデフォルト動作を防止します

以上がこの記事の全内容です。詳しく説明していますので、気に入っていただければ幸いです。