jQueryイベントとは何ですか? jQueryイベントの紹介
この記事では、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='btn'>按钮</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>
$('#title').hover(function(){
$('ul').css('display','block');
},function(){
$('ul').css('display','none');
});
</script>
</body>イベントシミュレーション
jQueryは、分割一致要素にバインドされたイベントをシミュレートするtrigger()メソッドを提供します
$element.trigger(type[,dat]);
<body>
<button id="btn">按钮</button>
<script>
// 绑定事件 - 由用户行为进行触发，调用处理函数
$('#btn').bind('click',function(){
console.log('this is button.');
});
// 模拟用户触发事件
$('#btn').trigger('click');
</script>
</body>関連する推奨事項:
イベントバブリングとは何ですか? jquery を使用してイベント bubble_jquery を防ぐ方法
JavaScript/jquery キーボードイベントの概要
以上がjQueryイベントとは何ですか? jQueryイベントの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1663
14
1420
52
1313
25
1266
29
1238
24
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上
Apr 09, 2025 am 12:11 AM
ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
