jQueryイベントとは何ですか? jQueryイベントの紹介-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryイベントとは何ですか? jQueryイベントの紹介

不言

Sep 10, 2018 pm 04:23 PM

csshtmljavascript

この記事では、jQuery イベントとは何ですか? jquery イベントの紹介には一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。

ページの読み込み

ページが読み込まれた後の実行メカニズムとして、load イベントが DOM で提供されます。jQuery には、同様の関数を実装するための ready() メソッドが用意されていますが、次のような違いがあります。
1. DOM のloadイベントには短縮形式がありませんが、jQueryのready()メソッドで短縮形式が提供されます。
2. HTML ページがロードされ、DOM ノードツリーがロードされた後にのみ、load イベントがトリガーされ、ready() メソッドが呼び出されます。
3. HTML ページに存在できるloadイベントは1つだけですが、複数のready()メソッドが存在できます。
ready() メソッドの文法構造:

1.$(document).ready(function(){});
2.$().ready(function(){});//简写
3.$(function(){});//简写

イベントバインディング

単一イベントバインディングと単一イベントバインド解除

単一イベントバインディング

jQuery はバインディングイベントを完了するための binding() メソッドを提供します。構文は次のとおりです。
$element.bind(type,data,callback);
type: バインディングイベントの名前を示します。これは、「on」のない文字列型です。
data: element.data プロパティ値としてイベントオブジェクトに渡される追加のデータオブジェクト (オプション)。
callback: バインディングイベントの処理関数を表します。
サンプルコードは次のとおりです。

<button>按钮</button>
<script>
function click1(){
console .log(&#39;this  is button,&#39;);
}
$(&#39;#btn&#39;).bind(&#39;click&#39;,click1);</script>

単一イベントのバインド解除

jQuery は、イベントのバインドを解除する unbind() メソッドを提供します。具体的な方法は以下の通りです:
$element.unbind(type[,data,callback]);

$('#btn').unbind('click');//只传递事件名称，解绑定该事件的所有处理函数。
$('#btn').undind('click'click1);//传递时间名称和指定的处理函数，解绑定该事件的指定处理函数。

複数のイベントバインドとバインド解除

<style>
        #title {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>


<p>菜单</p>