stopPropagation
prevents further propagation of the current event in the capturing and bubbling phases.
preventDefault
prevents the default action the browser makes on that event.
Examples
preventDefault
$("#but").click(function (event) {
event.preventDefault()
})
$("#foo").click(function () {
alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>
stopPropagation
$("#but").click(function (event) {
event.stopPropagation()
})
$("#foo").click(function () {
alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<button id="but">button</button>
</div>
With stopPropagation
, only the button
's click handler is called while the div
's click handler never fires.
Where as if you use preventDefault
, only the browser's default action is stopped but the div's click handler still fires.
Below are some docs on the DOM event properties and methods from MDN:
For IE9 and FF you can just use preventDefault & stopPropagation.
To support IE8 and lower replace stopPropagation
with cancelBubble
and replace preventDefault
with returnValue
"How does this
and $scope
work in AngularJS controllers?"
Short answer:
this
- When the controller constructor function is called,
this
is the controller.
- When a function defined on a
$scope
object is called, this
is the "scope in effect when the function was called". This may (or may not!) be the $scope
that the function is defined on. So, inside the function, this
and $scope
may not be the same.
$scope
- Every controller has an associated
$scope
object.
- A controller (constructor) function is responsible for setting model properties and functions/behaviour on its associated
$scope
.
- Only methods defined on this
$scope
object (and parent scope objects, if prototypical inheritance is in play) are accessible from the HTML/view. E.g., from ng-click
, filters, etc.
Long answer:
A controller function is a JavaScript constructor function. When the constructor function executes (e.g., when a view loads), this
(i.e., the "function context") is set to the controller object. So in the "tabs" controller constructor function, when the addPane function is created
this.addPane = function(pane) { ... }
it is created on the controller object, not on $scope. Views cannot see the addPane function -- they only have access to functions defined on $scope. In other words, in the HTML, this won't work:
<a ng-click="addPane(newPane)">won't work</a>
After the "tabs" controller constructor function executes, we have the following:
The dashed black line indicates prototypal inheritance -- an isolate scope prototypically inherits from Scope. (It does not prototypically inherit from the scope in effect where the directive was encountered in the HTML.)
Now, the pane directive's link function wants to communicate with the tabs directive (which really means it needs to affect the tabs isolate $scope in some way). Events could be used, but another mechanism is to have the pane directive require
the tabs controller. (There appears to be no mechanism for the pane directive to require
the tabs $scope.)
So, this begs the question: if we only have access to the tabs controller, how do we get access to the tabs isolate $scope (which is what we really want)?
Well, the red dotted line is the answer. The addPane() function's "scope" (I'm referring to JavaScript's function scope/closures here) gives the function access to the tabs isolate $scope. I.e., addPane() has access to the "tabs IsolateScope" in the diagram above because of a closure that was created when addPane() was defined. (If we instead defined addPane() on the tabs $scope object, the pane directive would not have access to this function, and hence it would have no way to communicate with the tabs $scope.)
To answer the other part of your question: how does $scope work in controllers?
:
Within functions defined on $scope, this
is set to "the $scope in effect where/when the function was called". Suppose we have the following HTML:
<div ng-controller="ParentCtrl">
<a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
<div ng-controller="ChildCtrl">
<a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
</div>
</div>
And the ParentCtrl
(Solely) has
$scope.logThisAndScope = function() {
console.log(this, $scope)
}
Clicking the first link will show that this
and $scope
are the same, since "the scope in effect when the function was called" is the scope associated with the ParentCtrl
.
Clicking the second link will reveal this
and $scope
are not the same, since "the scope in effect when the function was called" is the scope associated with the ChildCtrl
. So here, this
is set to ChildCtrl
's $scope
. Inside the method, $scope
is still the ParentCtrl
's $scope.
Fiddle
I try to not use this
inside of a function defined on $scope, as it becomes confusing which $scope is being affected, especially considering that ng-repeat, ng-include, ng-switch, and directives can all create their own child scopes.
Best Answer
This is a good questions and there is an explanation for you.
First of all note that:
$scope.on('event');
will listen to$scope.$broadcast('event')
&$rootScope.$broadcast('event')
$rootScope.on('event');
will listen to$rootScope.$broadcast('event')
&$rootScope.$emit('event')
Next you need to note that:
$scope.on();
will be destroyed automatically when the controller loses it representation in view or component (getting destroyed).$rootScope.$on()
manually.>> Example of how to destroy
$rootScope.on()
:>>> Since Angular v1.5 we can use component lifecycle to manage init and destroys in a nice way:
This plnkr will show you the different behaviors of
$scope.on()
and$rootScope.on()
.By switching the view in this plunkr the controller will be rebinded to your view. The
$rootScope.on();
event is binded every time you switch a view without destroying the event bindings of the view before. In that way the$rootScope.on()
listeners will be stacked/multiplied. This will not happen to the$scope.on()
bindings because it will be destroyed by switching the view (losing the E2E binding representation in DOM -> controller is destroyed).The difference between
$emit
&$broadcast
is:$rootScope.$emit()
events only triggers$rootScope.$on()
events.$rootScope.$broadcast()
will trigger$rootScope.$on()
&$scope.on()
events (pretty much everthing hear this event).$scope.$emit()
will trigger all$scope.$on
, all its parents (scopes in parent controllers) and$rootScope.$on()
.$scope.$broadcast
will only trigger$scope
and its children (scopes in child controllers).Additional Links