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

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

不言

リリース： 2018-09-10 16:23:14

オリジナル

1222 人が閲覧しました

この記事では、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: バインディングイベントの処理関数を表します。
サンプルコードは次のとおりです。

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

ログイン後にコピー

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

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>
</head>
<body>
<p id="title">菜单</p>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
// mouseover表示鼠标悬停在指定元素之上 mouseout表示鼠标从指定元素上移开
 //jQuery支持链式操作，多事件绑定时，事件名称之间使用空格分离。
$('#title').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
 
 /*
        unbind()方法
        1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定
        2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定
        3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定
 */ 
 $('#title').unbind('mouseover mouseout');

ログイン後にコピー

イベントバインドメソッドの比較

jQueryは複数のイベントバインドとバインド解除のセットを提供しますメソッド
1.bind() および unbind() - jQuery 3.0 バージョン以降に削除されたメソッド
2.on() および off() メソッド - jQuery 1.7 バージョン以降の新しいメソッド
実際、bind() と unbind() は基礎となるメソッドは on() と off() です
3.live() と die() - jQuery 1.7 バージョン以降に削除されたメソッド
関数 - イベント委任を実装します
4.delegate() と undelegate() - jQuery バージョン 1.6 以降に新たに追加されたメソッド, jQuery
バージョン3.0以降削除されたメソッド
機能 - イベントデリゲーションの実装
5.one() - イベントにワンタイム関数をバインド

イベント切り替え

hover()メソッド

hover()メソッドはで提供されていますjQuery マウスオーバーイベントの効果をシミュレートします。

$element.hover(over,out);

ログイン後にコピー

サンプルコードは次のとおりです:

   <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>
</head>
<body>
<p id="title">菜单</p>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
 $(&#39;#title&#39;).hover(function(){
        $(&#39;ul&#39;).css(&#39;display&#39;,&#39;block&#39;);
    },function(){
        $(&#39;ul&#39;).css(&#39;display&#39;,&#39;none&#39;);
    });

</script>
</body>

ログイン後にコピー

イベントシミュレーション

jQueryは、分割一致要素にバインドされたイベントをシミュレートするtrigger()メソッドを提供します
$element.trigger(type[,dat]);

<body>
<button id="btn">按钮</button>
<script>
    // 绑定事件 - 由用户行为进行触发，调用处理函数
    $(&#39;#btn&#39;).bind(&#39;click&#39;,function(){
        console.log(&#39;this is button.&#39;);
    });
    // 模拟用户触发事件
    $(&#39;#btn&#39;).trigger(&#39;click&#39;);

</script>
</body>

ログイン後にコピー