Angular进阶教程三

7 总结

angular上手比较难，初学者（特别是习惯了使用JQuery的人）可能不太适应其语法以及思想。随着对ng探索的一步步深入，也确实感觉到了这一点，尤其是框架内部的某些执行机制。

7.1页面效果

ng-show ng-hide 无动画效果问题

7.2委派事件（代理事件）

7.2.1 NG循环及事件绑定

<ul>

<li ng-repeat="a in array">

<input ng-modle=”a.m” />

</li>

</ul>

Ng会根据array的长度复制出n个<li>标签。而复制出的<li>节点中还有<input>节点并且使用了ng-modle指令，所以ng会对所有的<input>绑定监听器（事件）。如果array很大，就会绑定太多的事件，性能出现问题。

7.2.2 jQuery委派事件

 

从jQuery1.7开始，提供了.on()附加事件处理程序。

.on( events [, selector ] [, data ], handler(eventObject) )

参数Selector为一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。

如果省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的。

当提供selector参数时，事件处理程序是指为委派事件（代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。

委托事件有两个优势：他们能在后代元素添加到文档后，可以处理这些事件；代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。

例如，在一个表格的 tbody 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事

$("#dataTable tbody tr").on("click", function(event){ alert($(this).text());});

委派事件的方法只有一个元素的事件处理程序，tbody，并且事件只会向上冒泡一层（从被点击的tr 到 tbody ）:

$("#dataTable tbody").on("click", "tr", function(event){  alert($(this).text());});

许多委派的事件处理程序绑定到 document 树的顶层附近，可以降低性能。每次发生事件时，jQuery 需要比较从 event target（目标元素） 开始到文档顶部的路径中每一个元素上所有该类型的事件。为了获得更好的性能，在绑定代理事件时，绑定的元素最好尽可能的靠近目标元素。避免在大型文档中，过多的在 document 或 document.body 上添加代理事件。