ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)
jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB転載
- 2021-12-15 18:34:252517ブラウズ
前の記事「知っておくべきJavaScript最適化の18のヒント」では、JavaScriptのヒントをいくつか紹介しました。この記事では、jqueryイベントをバインドする方法を見てみましょう。バインドの設定と解除に関する関連知識を持つすべての人に役立ちます。
#jQuery イベントのバインドとバインド解除
1.1. jQuery イベントの登録
jQuery は、開発者を悩ませる便利なイベント登録機構を提供しますが、操作のメリットとデメリットは次のとおりです。イベントの報道やその他の問題について心配する必要はありません。 欠点: 通常のイベント登録ではイベント委任ができず、イベントのバインド解除もできないため、他の方法が必要です。#構文
デモ コード<body>
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
1.2. jQuery イベント処理
通常の登録イベント メソッドの欠点のため、jQuery では複数の処理メソッドが開発されました。重要な点は次のとおりです:
on(): イベント バインディングに使用され、現在最も便利ですイベントのバインドメソッド
off(): イベントのバインド解除
trigger() /triggerHandler(): イベントトリガー
- 1.2.1 on() バインディング イベントのイベント処理
通常の登録イベント メソッドの欠点のため、jQuery は複数の新しいイベント バインディング メソッド binding () / を作成しました。 live() / delegate() / on() など、そのうち最も優れているものは次のとおりです: on()Syntax
#
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
1.2.3. イベント処理 off() アンバインド イベント
イベント上のロジックの特定の When it is要件に応じてイベントのロジックが不要になった場合は、イベントのロジックを削除できます。このプロセスはイベントのバインド解除と呼ばれます。 jQuery は、die() / undelegate() / off() などのさまざまなイベント バインド解除メソッドを提供しており、一度だけトリガーされるイベント バインド メソッド one() もあります。 #構文
デモコード
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是一个P标签</p>
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
1.2.4. イベント処理trigger()は自動的にイベントをトリガーします
Syntax
デモ コード
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 一个会获取焦点，一个不会
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
1.3. jQuery イベント オブジェクト
構文
デモ コード
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</body>注: jQuery のイベント オブジェクトは、API および DOM のイベントからの参照として使用できます。 。 
1.4. jQuery コピー オブジェクト
jQuery は、要素のサイズと位置をすばやく取得および設定するための 2 つの API セットを提供しており、便利で使いやすいです。 . 内容は以下の通りです。構文
デモ コード
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>
1.5. jQuery の複数ライブラリの共存
文法
デモ コード
<script>
$(function() {
// 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>関連ビデオ チュートリアルの推奨事項: 
jQuery ビデオ チュートリアル
以上がjqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。