1. ページ読み込み完了応答イベント いわゆるページ読み込みが完了すると、DOM 要素が読み込まれ、操作できるようになります。
①jQuery の $(document).ready() イベント
ready(fn) は、jQuery イベントモジュールで最も重要な関数です。このメソッドは、window.onload 登録イベントの代替として見ることができます。このメソッドを使用すると、DOM がロードされたときにバインドされた関数をすぐに呼び出すことができ、その時点でほとんどすべての JavaScript 関数を実行する必要があります。
ready(fn) 戻り値: オブジェクト パラメータ -fn: DOM のロード時に実行されるパラメータ DOM のロード時に実行される関数をバインドします。
非常に単純な省略形 $ を持ちます。 (document).ready(function(){}) => $(function(){})
②window.onload()イベントと$(document).ready()イベントの比較
window.onload ()=function(){}
複数の window.onload() が使用される場合、最後にバインドされた関数のみが実行され、以前の window.onload() にバインドされた関数はすべて上書きされます。
複数の $() が使用されている場合、それらはすべて実行できます。
body タグの onload イベントですでに関数が登録されている場合、$() イベントで登録された関数は実行されないことに注意してください
2 . アンチバインディングイベントリスナーによるバインディング
①バインディングイベント
⑴bind(type,[data],fn) 関数
は、ある要素のイベントに関数をバインドします $( "#id ").click(function(){}) は、匿名関数を id 要素のクリック イベントにバインドします
ただし、上記の例は、単純で一般的に使用されるイベント バインディングであるため、実際には単なる省略です。正式な書き方は次のようにする必要があります:
$("#id").bind("click",[data],function(){})
bind(type,[data],fn) 戻り値:オブジェクトパラメータ -type: イベントタイプ 文字列データ: オプション、後続の fn の実パラメータにevent.data 属性値として渡されます オブジェクト fn: イベントにバインドされた関数 関数
⑵ 処理関数
のパラメータを渡します 使用ここで、bind() 関数の 2 番目のパラメーターとevent.data 属性は、fn 関数に渡されるパラメーターです
コードは次のとおりです。
$("#Text2").bind("click",{最初:"1",二番目:" 2"},function(event){
if(event.data.first=="1"){$(this).val("ようこそ")}
if(event.data.second= ="1"){$(this).val("")}
});
})
2 番目のパラメータはjson オブジェクト、fn 関数内で、event.data を通じてキー名からパラメータ値を取得する
⑶ブラウザのデフォルト動作を防ぐ
このとき、bind でバインドされた関数がブラウザのデフォルト動作と競合する場合があります。ブラウザのデフォルトの動作を防ぎたい場合は、 fn の後に return false を追加する必要があります。
コードは次のとおりです。 :
$(" form").bind("submit",function(){return false;})
②アンチバインドイベント
は、要素からイベントをアンバインドする Function
unbind([type],[fn name]) 戻り値: オブジェクト パラメータ -type: イベントタイプ String fn name: アンバインドする関数名 Function
上記 2 つのパラメータはオプションですパラメータ if パラメータが空の場合、一致するすべての要素のすべてのイベントのバインドを解除する関数です
コードは次のとおりです
$(function(){$("#btn1").click(function(){
$("input[type=text]").unbind()} )
})
btn1 をクリック後、type=text テキストボックスのイベントにバインドされている関数をすべてアンバインドします
③ワンタイムイベントバインド
は特定の要素のイベントに対するものですバインドされた関数は 1 回だけ実行できます
one(type,[data],fn) 戻り値: オブジェクト パラメーター -type: イベント タイプ 文字列データ: オプション、event.data 属性値として後続の fn に渡されます 実際のパラメーターオブジェクト fn: イベントにバインドされた関数
は、bind() 関数と同じように使用されます。違いは、1 つの fn は 1 回しか実行できないことです。
3. イベント トリガー 上記でバインドされている関数の中には、実行する前にユーザーが特定の操作を実行する必要があるものがあります。たとえば、クリック イベントにバインドされている関数は、ユーザーが対応するボタンをクリックすると実行されます。ただし、イベント トリガーは、コードを使用してユーザー アクションをシミュレートし、ユーザーが特定の操作を実行しなくても、イベントにバインドされた関数を実行できます。
trigger(type,[data]) 戻り値: オブジェクト パラメータ -type: イベント タイプ 文字列データ: オプション、実際のパラメータに渡される トリガされたイベントにバインドされた関数の配列 (JavaScript 配列) トリガされたすべての関数 バインドこのタイプのイベントがブラウザのデフォルトの操作と競合する場合、イベント トリガーはブラウザのデフォルトの操作
$(function(){$("#Text1").bind("click",function(){$(this).val("")})})
$(function(){$( " #Text2").click(function(event,pamas1,pamas2)
{$(this).val("トリガーイベントトリガー" pamas1 pamas2)})
})
$(function( ){ $("input[type=text]").trigger("click",["1","2"])})
上記のコードは 2 つのテキスト ボックス用ですクリック イベントは関数にバインドされていますが、コードの最後の行ではこれら 2 つのテキスト ボックスのクリック イベントのトリガーも設定しているため、ユーザーが対応するテキスト ボックスをクリックしなくても、クリック イベントにバインドされている関数を実行できます。さらに、トリガーはトリガーする関数にもパラメーターを渡します。これは JavaScript 配列であり、Text2 の click 関数で取得されたパラメーターを確認できます。
トリガー関数によってトリガーされたイベントがブラウザーのデフォルト操作と競合する場合、イベントトリガーはブラウザーのデフォルト操作を実行しますが、triggerHandler 関数はブラウザーのデフォルト操作を実行しません。
triggerHandler(type,[data]) は、トリガー
4. イベントの対話型処理
①hover: マウスホバーを模倣します
hover(over) 、out) 戻り値: オブジェクト パラメーター -over: マウスが要素上に移動したときにトリガーされる関数 out: マウスが要素の外に移動したときにトリガーされる関数
ユーザー入力を決定
$(function(){$("#hover1").hover(function(){
$("#hoverpd").show( );},function( ){
$("#hoverpd").hide();})
})
②トグル: 複数のクリックに対する応答をループ
要素の一致 クリック イベントにより多くのバインディング関数が追加され、要素が継続的にクリックされるとループ内で実行されます。
toggle(fn1,fn2,fn3...) 戻り値: オブジェクト パラメーター -fn1,fn2,fn3.. 。ループする関数 関数
<入力タイプ=" ボタン" id="toggle1" value="toggle"/>
var i=0;
$(function(){$("#toggle1").toggle(function(){i ; $( "#hover1").val(i)},
function(){i=i 2;$("#hover1").val(i)})
})
5.jQuery の組み込みイベント型
①jQuery の組み込みイベント関数の 2 つの宣言方法
パラメーターなしのイベント関数 - イベント型名 () はユーザー操作をシミュレートします
パラメータ付きイベント関数 - イベントタイプ名 (イベント関数)
$($("#id").click(function(){})) パラメータ付きイベント関数
$($("#id ") .click(function(){}); $("#id").click();) パラメータのないイベント関数 - #id がクリックされなくても、対応する関数が実行され、ユーザー操作をシミュレートします
②JQuery を構築-in イベントの種類分類
⑴ブラウザ関連イベント
error(fn) 一致する要素でエラーが発生した場合に特定の関数がトリガーされます。たとえば、画像の src が無効な場合、エラー イベントの基準はありません。画像のエラー イベントがトリガーされます
load (fn) 一致する要素が読み込まれた後に特定の関数がトリガーされます。たとえば、ウィンドウはすべての DOM オブジェクトが読み込まれた後にトリガーされ、他の個々の要素は単一の要素が読み込まれた後にトリガーされます。
unload(fn)
resize(fn) マッチング 要素のサイズが変更されると関数がトリガーされます。
scroll(fn) スクロールバーが変更されるとトリガーされます
⑵ フォーム関連のイベント
change(fn) は、一致する要素がフォーカスを失ったときにトリガーされ、要素がフォーカスを獲得した後にもトリガーされます。
select(fn) ユーザーがテキスト ボックス内のテキストを選択するとトリガーされます
submit( fn) フォーム送信時にトリガー
⑶キーボード操作関連イベント
keydown(fn) キーボードが押された時にトリガー
keypress(fn) トリガーシーケンスは keydown->keyup->keypress
keyup(fn) キーボードが押されてポップアップしたときのトリガーシーケンスは keydown->keyup->keypress です
keyup(fn) キーボードがポップアップされたときにトリガーされます
⑷マウス操作関連イベント
クリック(fn) 順序はマウスダウン->マウスアップ->クリック
マウスダウン(fn)
マウスアップ(fn)
dblclick(fn)
マウスオーバー(fn)
マウスアウト( fn)
mousemove(fn) は、一致する要素上を移動するとトリガーされます。イベント ハンドラー関数には、イベント オブジェクト (clientX、clientY プロパティはマウス座標を表します) が渡されます。
⑸インターフェイスには、関連するイベントが表示されます。
blur(fn) 一致する要素がマウスまたは Tab キーのいずれかでフォーカスを失ったときにトリガーされます
focus(fn)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
