はじめてのJQuery (2) イベントの仕組み (1)_jquery
もちろん、その利点はこれに限定されません。JQuery イベント処理メカニズムを使用すると、JavaScript 自体の組み込みイベント応答メソッドの一部を直接使用するよりも柔軟性が高く、公開される可能性が低くなり、構文がより洗練されます。私たちの仕事の規模が大幅に縮小されます。
JQuery のイベント処理メカニズムには、ページ読み込み、イベント バインディング、イベント委任、イベント切り替えの 4 つのメカニズムが含まれています。 $(document).ready() イベントから始めましょう。
1. ページの読み込み $(document).ready() は Javascript の onLoad() イベントに相当しますが、このメソッドはページの読み込み時に実行されますが、この 2 つには微妙な違いがあります。 . 、ready() イベントは、HTML のダウンロードが完了して DOM ツリーに解析された後に実行できますが、onLoad() イベントは、ファイルを含む HTML がダウンロードされるまで実行できません。 ready() イベントには他のイベントや関数をバインドできます。ready() にはいくつかの構文があります。
$(document).ready(function(){});
$().ready(function(){});
$(function(){});
もちろん、私は個人的に、読みやすさを高めるために最初の方法を使用することに今でも慣れています。注意すべき点 は、ready() イベントを使用するときは、onload イベントがないことを確認してください。 要素内で関数を登録しないと、$(document).ready() イベントがトリガーされません。同じページ内で $(document).ready() イベントを無制限に使用することもできます。登録された関数は (コード内で) 順番に実行されます。
2. イベント切り替え には、hover() と toggle() の 2 つのメソッドしかなく、複合的なユーザー操作をインターセプトし、複数の関数で応答するため、複合イベント処理メカニズム。 hover()メソッドは、マウスホバーの変化を模倣するメソッドで、簡単に言うと、マウスが出入りするときに指定した動作を実行するメソッドで、最もよく使われるのはメニュー切り替え効果を作成する方法です。 toggle() メソッドは、クリック時に指定した関数メソッドを順番に実行します。最初のクリックでは最初の関数が実行され、2 番目のクリックでは 2 番目の関数が実行されます。イベント バインディングでは unbind ('click. ') 削除するメソッド。
hover(over,out) インスタンス: