jQueryのイベント-jsチュートリアル-php.cn

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	キーボードイベントでキーを取得します
补充：（1）JS中的stopPropagation()方法不兼容IE浏览器（2）在标准DOM中，mouseover和mouseout所发生的元素都可以通过event.target访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement，在mouseout中相当于IE的event.toElement。（3）在JS中，IE用event.x和event.y；Firefox用event.pageX/event.pageY。如果页面有滚动条，还要加上滚动条的宽度和高度。 6.移除事件（1）移除按钮元素上已有的事件：$("#btn").unbind(); 格式：unbind([type],[data]); 第一个参数是事件类型，第二个参数是将要移除的函数 ①如果没有参数，删除所有绑定的事件。 ②有参数只删除参数类型的绑定事件。 ③如果把在绑定时传递的处理函数作为第二个参数，只有特定的事件处理函数会被删除。（2）移除