jQueryのイベント

1. DOM をロードする

ページがロードされた後、JS は window.onload を使用して DOM 要素にイベントを追加します。jQuery では、このメソッドを使用して DOM 要素にイベントを追加します。 DOM 準備ができたら、DOM を操作し、バインドされている関数を呼び出します。 Window.Onload と $ (docume) の比較

Window.onload = Function () {}

$ (document) (function () {}) $(document) はパラメータなしでは $() と省略できます。次のように省略できます: ①$(document).ready(function(){})②$(function(){})対応する速度が大幅に向上しますWeb アプリケーション要素の関連ファイルがダウンロードされていないため、一部の属性が無効になりますページの読み込みについては別の方法を使用します - ロード()メソッド

の実行メカニズム

が必要です。 Web ページ内のすべてのコンテンツ (画像を含む) が読み込まれるまで待ちます

Web ページ内のすべての DOM 構造が描画された後に実行されます。おそらく DOM 要素に関連付けられたものが読み込まれていない可能性があります

書き込み回数。

複数の

を同時に書くことはできません

簡単な書き方

None

比較

欠点

解決策

additional：load（）メソッドは、ハンドラー関数がバインドされている場合、ハンドラー関数にバインドしますwindow オブジェクトの場合、すべてのコンテンツ (ウィンドウ、フレーム、オブジェクト、画像などを含む) がロードされた後にトリガーされます。ハンドラー関数が要素にバインドされている場合、要素のコンテンツがロードされた後にトリガーされます。

1 $(window).load(function(){2 //编写代码3 })

2. イベントバインディング - binding() メソッド

形式:bind(type [, data] , fn)

最初のパラメータはイベントタイプです:blur、focus、load、unload、resize 、scroll、click、dblclick、mousedown、mouseover、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error

2 番目のパラメーターは、これまでと同様にオプションのパラメーターです。イベントオブジェクトの追加データオブジェクトに値が渡されます

3番目の食事はバインディングに使用される処理関数です

補足:要素が表示されているかどうかを判断するには、jQueryの

is()メソッドを使用します

略語: .mouseover(function(){})

bind() メソッド その他の用途:

(1) 複数のイベントタイプを一度に要素にバインドする

 
$("p").bind("mouseover mouseout",
function
(){};);

(2) 管理を容易にするイベント名前空間を追加します

3. 合成イベント

hover() メソッド: カーソルホバーイベントをシミュレートします

形式: hover(enter, Leave);

Whenカーソルが要素に移動すると、最初に指定された関数がトリガーされ、カーソルが要素を削除すると、指定された 2 番目の関数がトリガーされます。

toggle() メソッド: 連続マウスクリックイベントをシミュレートします

形式: toggle(fn1,fn3...fnN);

$(function()){
      $("#panel").toggle(function(){
               $(this).next().show();
       },function(){
                $(this).next().hide();
       })
})

追加のトグルもあります 別の機能があります: 表示されるものの切り替え要素の状態。要素のコースウェアをクリックすると、非表示に切り替わります。要素が非表示の場合は、クリックして表示に切り替えます

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

4. イベントのバブル

バブル: ネストされた要素は同じイベントの実行順序に対応し、イベントは DOM 階層に従います。トップ

イベントバブリングによって引き起こされる問題:

(1) イベントオブジェクト: イベント

イベントオブジェクトを作成するには、要素上でイベントが実行されるときに、イベント処理関数にパラメータイベントを追加するだけです。イベントオブジェクトが作成されます。このオブジェクトはイベント処理関数のみにアクセスできます。イベント処理関数が実行された後、イベントオブジェクトは破棄されます

(2) イベントバブリングの停止:event.stopPropagation()メソッド

(3) ) デフォルトの動作を防止する:event.preventDefault() メソッド

例: フォームの検証が送信条件を満たさない場合にフォームの送信を防止する (デフォルトの動作)

$(function(){
      $("#sub").bind("click",function(event){
              var username=$("#username").val();
              if(username==""){
                     $(""#msg).html("<p>文本框内容不能为空</p>")；
                     event.preventDefault();
              }
        })
})

バブリングを停止したい場合は、イベント オブジェクトのデフォルトの動作と同時に、イベント ハンドラー関数で false を返すことができます

5. イベント キャプチャ

イベント キャプチャとイベント バブリングは、トップダウンでトリガーされるプロセスです。

すべてのブラウザがイベント キャプチャをサポートしているわけではなく、jQuery もサポートしていません

6. イベント オブジェクトの属性

関数

event.type

型を取得するイベントの

event.preventDefault()

デフォルトのイベント動作を阻止

event.stopPropagation()

イベントバブリングを停止

event.target

イベントをトリガーした要素を取得する

event.popularTarget	現在のイベントに関係する他のDOM要素を返します
event.pageXとevent .pageY	ページを基準としたx座標とy座標を取得します
event.that	左を取得しますマウス イベントで、中央、および右マウス ボタンを使用して、キーボード イベントでキーボード キーを取得します
event.metaKey	キーボード イベントで 09d95ea3e5ce51a5c151fc2a10eb50b5元素中的其中一个事件 在绑定时要给匿名函数指定一个变量 $(function(){ $("#btn").bind("click",myFun1=function(){ //代码1 }).bind("click",myFun1=function(){ //代码2 }） }) 单独移除某个绑定事件 $("#del1").click(function(){ $("#btn").unbind("click",myFun2); }) 注意：对于只需要触发一次就要立即解除绑定的情况，使用one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即：在每个对象上，事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。

以上がjQueryのイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。