8

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?

firia2000
  • 1,773
  • 5
  • 19
  • 20
  • You might want to check http://stackoverflow.com/questions/9682092/databinding-in-angularjs – Umur Kontacı Apr 01 '13 at 08:26
  • @fastreload Thanks! I just have read that article but it is still not clear. According to that article, AngularJS uses $apply() and $digest() for dirty-checking. But who does call those functions? Does 'angular' module use something like setInterval() for polling? – firia2000 Apr 01 '13 at 09:01
  • There are couple of event watchers which initiate `digest` phases, Stewie's answer has some detail. – Umur Kontacı Apr 01 '13 at 09:02

2 Answers2

13

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.

Stewie
  • 60,366
  • 20
  • 146
  • 113
-1

You can attach event listeners to any DOM node using :

node.addEventListener(eventName, listenerMethod, useCapture)

While you assigned before a method to node.onchange, using addEventListener, you have to attach a event listener to the event 'change', or 'click'.

See : https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

kketch
  • 673
  • 1
  • 7
  • 10
  • 1
    The question is about angularjs in particular, not dom event handlers – Umur Kontacı Apr 01 '13 at 08:22
  • Well, AngularJS is still javascript with the DOM right ? So angular do attach some event listeners using the DOM, i don't know angular, but i suppose event are attached to the document element and they are using event bubbling to filter which target will receive the DOM event. – kketch Apr 01 '13 at 08:31
  • On the base, yes it has to. But in fact, it does not work the way you "suppose". It uses dirty checking model to find what has changed. You can read more about it inhttp://stackoverflow.com/questions/9682092/databinding-in-angularjs – Umur Kontacı Apr 01 '13 at 08:37