How does AngularJS internally catch events like 'onclick', 'onchange'?

Question

I used "ng-model" in input element and observed that element with chrome inspector. But every onxxx properties(including onchange) of input element was null. Then, how can AngularJS catch "onchange" event triggered by user input?

Answer 1

If, in Chrome's Event Listeners tab, you inspect a standard text input element (with ng-model attached) you will see that it has two event listeners attached: $destroy and input.

Angular, by default, listens for input event, and, in case it's not supported by the browser, it will fall back to keydown + change events.

Events are binded with jQlite's bind method (unless you also have a full jQuery included, in which case its bind method will take over).

Example input element that you can inspect yourself is found on input [email] directive documentation page.

Exact line in Angular source (v1.2.0rc1) responsible for handling the input event.