Angular.js是如何处理事件绑定的，比如"ng-click"

How does Angular.js handle event bindings such as "ng-click"?

本文关键字：quot 比如 ng-click 绑定 js 处理事件 Angular 更新时间：2023-09-26

Angular.js如何处理像"ng-click"这样的事件绑定?

如果我使用Chrome开发工具检查DOM中的HTML输出，我只看到2个类添加到具有"ng-click"指令的元素，"ng-scope"answers"ng-binding"。Angular如何绑定到DOM来拦截这些呢?它附加到最顶层的元素，并保持一个大的对象在内存映射事件到DOM元素，他们注册到，并利用事件冒泡?还是别的什么?

AngularJS做脏检查，每次AngularJS发现一个指令，它就会设置一个$watch来查看变化。

$watch列表是一组表达式，自上次迭代以来可能已经更改。如果检测到更改，则调用$watch函数，该函数通常使用新值更新DOM。一旦Angular的$digest循环结束，执行就会离开Angular和JavaScript上下文。随后浏览器会重新呈现DOM以反映任何更改。

简单地说，有一种机制可以创建一个需要绑定的指令列表，在$digest循环期间，列表将在更改时进行检查，如果有更改，浏览器会重新呈现DOM，并且它将反映到浏览器中。

这是一个很短的解释，你可以在这里找到更多:

http://docs.angularjs.org/guide/concepts运行时

ng-[eventname]-指令的工作原理是做一个element.bind，其中元素是一个jQuery/jqLite元素。这个绑定方法通过调用一个元素来工作。addEventListener(至少在Chrome中)。通过检查DOM，您将看不到这个事件监听器。