1. 単独イベント登録
文法：
その他のイベントは基本的にオリジナルと同じです。マウスオーバー、マウスアウト、ぼかし、フォーカス、変更、キーダウン、キーアップ、サイズ変更、スクロールなど。
2. イベント処理 on() バインディング イベント
on() メソッドは、一致した要素上の 1 つ以上のイベントのイベント ハンドラーをバインドします。
文法：
1. イベント: 「クリック」や「キーダウン」など、スペースで区切られた 1 つ以上のイベント タイプ。
2. selector: 要素の子要素セレクター。
3. fn: コールバック関数は、要素にバインドされたリスニング関数です。
on() メソッドの利点 1:
①複数のイベント、複数の処理イベントハンドラをバインドします。
② イベントハンドラが同じ場合：
注: 複数のイベントはスペースで区切られます。
on() メソッドの利点 2:
アクションはイベントによって委任できます。イベント委任の定義は、もともと子要素に追加されたイベントを親要素にバインドすること、つまり、イベントを親要素に委任することです。
上記のコードの意味: クリック イベント click は ul にバインドされていますが、トリガー オブジェクトは li です。li をクリックした後、イベントが親にバブルアップされ、親にクリック イベントがあるため、このプログラムは処刑される。
それ以前には、bind()、live() delegate() などのイベントバインディングやイベント委任を処理するメソッドがありますので、最新版では on を使用して置き換えてください。
on() メソッドの利点 3: on() は動的に生成された要素にイベントをバインドできる
また、 click() は動的に生成された要素にイベントをバインドできません
ケース: Weibo ケースを公開する
- 公開ボタンをクリックし、小さな li を動的に作成し、テキスト ボックスの内容と削除ボタンを配置して、ul に追加します。
- 現在の Weibo メッセージを削除するには、[削除] ボタンをクリックします。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$(".btn").on("click", function () {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.点击的删除按钮，可以删除当前的微博留言li
// $("ul a").click(function() { // 此时的click不能给动态创建的a添加事件
// alert(11);
// })
// on可以给动态创建的元素绑定事件
$("ul").on("click", "a", function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>参考：ダークホース