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

jquery イベント: 1. マウス イベント (クリック イベント、マウスオーバー イベントなどを含む); 2. キーボード イベント (キーダウンの押下キー、キーアップのリリース キーなどを含む); 3. フォーム イベント (フォーカスの取得など) 、ブラーがフォーカスを失うなど; 4. バインディング イベント、バインド バインディング イベント; 5. hover メソッドによってトリガーされるイベント、toggle() メソッドによってトリガーされるイベントなどを含む複合イベント。

このチュートリアルの動作環境: Windows10 システム、jquery3.4.1 バージョン、Dell G3 コンピューター。

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

jQuery イベントは JavaScript イベントのカプセル化です。一般的に使用されるイベントには、マウス イベント、キーボード イベント、フォーム イベント、バインディング イベント、複合イベントなどが含まれます。

1. マウス イベント

メソッドは次のとおりです。

click(): クリック イベント、指定されたクリック イベントに関数をトリガーまたはバインドします。 element

mouseover(): 関数をトリガーまたは指定された要素のマウスオーバー イベントにバインドします

mouseout(): 関数をトリガーまたは指定された要素のマウスアウト イベントにバインドします

コード例:

 $(function () {
            $("input").click(function () {
                $("li").mouseover(function () {
                    $(this).css("background", "green");
                }).mouseout(function () {
                    //this.style.background = "";
                    this.style.cssText = "background:";
                });
            });
        });

2. キーボードイベント:

メソッドは次のとおりです:

keydown(): キーが押された場合、関数をトリガーするか、指定された要素の keydown イベントにバインドします。

keyup(): キーが放されたときにトリガーされます。または、関数を指定された要素の keyup イベントにバインドします

keypress(): 印刷可能な文字が生成されるときにトリガーされるか、指定された要素の keypress イベントに関数をバインドします。

コード例:

  $(function () {
        $("p input").keyup(function () {
            $("#events").append("keyup");
        }).keydown(function () {
            $("#events").append("keydown");
        }).keypress(function () {
            $("#events").append("keypress");
        });
        $(document).keydown(function (event) {
            if (event.keyCode == "13") {
                //按enter键
                alert("确认要提交么?");
            }
        });
    });

3。フォーム イベント:

メソッドは次のとおりです:

focus(): フォーカスを取得し、指定された要素のフォーカス イベントに関数をトリガーまたはバインドします。

blur(): フォーカスを失います。 、指定された要素のブラー イベントに関数をトリガーまたはバインドします

コード例:

// 查询输入框
  $("input[name='search']").focus(function(){
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
   $(this).val("请输入要查询的问题"); 
  });

2,

 $(function () {
 //给文本框添加边框样式
     $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
    });
  });

4、バインディング イベント:

構文解析:

bind( type,[data],fn)、データは必要ありません

type: イベント タイプ。主にブラーなどの基本的なイベントが含まれます。フォーカス、クリック、マウスアウトなど。さらに、カスタム イベントにすることもできます

fn: バインドに使用される処理関数

コード例:

bind one、

$("input[name=event_1]").bind("click",function() {
 $("p").css("background-color","#F30");
});

bind multiple、

$("input[name=event_1]").bind({
mouseover: function () {
 $("ul").css("display", "none");
},
mouseout: function () {
 $("ul").css("display", "block");
}
});

move 例外メソッド:

unbind([type],[fn]) は、バインディング イベントの逆です。メソッドにパラメータがない場合は、

unbind 複数のイベントを削除する場合は、2 つの間にスペースを追加するだけです

コード例:

 $(function () {
            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");
    });

注: unbind() がかかるときパラメータがない場合は、すべてのバインドされたイベントを削除することを意味します

5. 複合イベント

hover() メソッド

構文: hover(enter,leave);

このメソッドは、マウスオーバー イベントとマウスアウト イベントの組み合わせと同等です

コード例:

$("li").hover(function() {
               $("li").css("background", "gray");
           }, function() {
               $("li").css("background", "green");
           });

toggle() メソッド

toggle() メソッドはシミュレーションに使用されます。連続マウス クリック イベント

コード例:

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...     //...
);

同時に、toggle() メソッドには別の関数もあります。要素の表示状態の切り替え

$('input').toggle( 
  function () {
  $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  },
  function () {
   $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  }
 );

ビデオ チュートリアルの推奨事項:jQuery ビデオ チュートリアル

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