Angular进阶教程三

时间:2023-12-11 23:31:02

总结

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 上添加代理事件。