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 サイトの他の関連記事を参照してください。