jquery-中的事件委託
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<meta
http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<script
src="../js/jquery-1.12.4.min.js"></script>
<script>
$( function () {
// 1.以前的監聽
// 1.1 繫結了 6 次
// 1.2新增的元素 沒有事件
// $(".list li").click(function () {
// $(this).css({"color":"red"});
// })
// var sNew = "<li>" + "新增7個" +"</li>"
// $(".list").html($(".list").html() + sNew);
// 2.委託的寫法 將多個子元素 的事件 委託給 父元素事件
// 減少繫結的次數 提高效能
// 新增的元素 同樣有事件
$(".list").delegate("li","click",function
() {
$(this).css({"color":"red"});
// console.log($(this).index());
})
var sNew =
"<li>" + "新增7個" +
"</li>";
$(".list").html($(".list").html() +
sNew);
})
</script>
</head>
<body>
<ul
class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
相關文章
- js中的事件委託JS事件
- 事件委託事件
- 委託與事件-委託詳解(一)事件
- JavaScript 中的閉包和事件委託JavaScript事件
- 事件模型和事件委託事件模型
- jquery中如何使用事件委託?jQuery事件
- wpf移除事件委託事件
- JS事件流和事件委託JS事件
- Js 事件原理與事件委託JS事件
- 事件的捕獲、冒泡、委託事件
- 委託與事件-事件詳解(二)事件
- JQuery7:事件委託jQuery事件
- C# - 委託與事件C#事件
- C#委託與事件C#事件
- c# 委託和事件C#事件
- 對js事件委託的瞭解JS事件
- js--事件流、事件委託、事件階段JS事件
- 觀察者模式與.Net Framework中的委託與事件模式Framework事件
- 徹底搞清楚c#中的委託和事件C#事件
- 事件委託詳解最新版事件
- .NET委託,事件和Lambda表示式事件
- 詳解C#委託與事件C#事件
- C#基礎之委託,事件C#事件
- c#中的委託C#
- 詳解C#委託和事件(二)C#事件
- 詳解C#委託和事件(一)C#事件
- 來個簡單的事件委託 冒個泡事件
- ios中的多播委託iOS
- C#規範整理·泛型委託事件C#泛型事件
- C#.Net築基-解密委託與事件C#解密事件
- # 委託
- 委託
- 通過釋出訂閱模式實現的事件委託模式事件
- .NET進階篇02-Delegate委託、Event事件事件
- C# 從1到Core--委託與事件C#事件
- [JavaScript] 事件委託以及 Vue 列表迴圈事件繫結的效能最佳化JavaScript事件Vue
- 代理模式與Kotlin中的委託模式模式Kotlin
- 委託的好處
- [靈性程式設計]函式委託,自動事件程式設計函式事件