zoukankan      html  css  js  c++  java
  • Angular进阶教程三

    总结

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

  • 相关阅读:
    前端工具Rythem介绍
    Redis持久化————AOF与RDB模式
    Hessian——轻量级远程调用方案
    JavaScript中的类数组对象
    在SpringMVC中获取request对象
    linux下,远程连接mysql
    nohup后台运行jar与关闭
    Vi常用命令
    spring mvc 重定向问题
    eclipse修改jdk后版本冲突问题
  • 原文地址:https://www.cnblogs.com/ndos/p/8331811.html
Copyright © 2011-2022 走看看