Javascript Event StopPropagation

Event Propagation

Event Propagation Stops the Event from bubbling or making the event Chain . 

Example : -  A Click Event on a <td> tag will also fire click event on it's parent <tr> and this event chain also continues to parent <table> tag of that <tr> this makes a event chain in order to stop this event Chain propagation we can Use StopPropagation that Prevents this from happening.

StopPropagation ( ) will stop that event from happening on parent (the entire ancestors). When We Use StopPropagation only < td > Event will fire as per our Example above its parent < tr > or            < table > Click event will not fire .

StopPropagation ( ) Tells downward propagation of the event is stopped and also its upward propagation

CODE EXAMPLE 

<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
event.stopPropagation();
$('a').text('Click event is going to be executed');
$('a').contents().unwrap();
});
function executeParent() {
alert('here');
}
</script>

CODE EXPLANATION

If you execute the code above, the function executeParent() will not be called and you will not get the javascript alert this time. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event is going to be executed‘ and immediately you will be redirected to google.com. This is because we haven’t prevented the default click action from triggering this time using event.preventDefault() method.

Event Prevent Default in Javascript

Event PreventDefault

Event PreventDefault () Prevents the Default Browser Action In Response the Event Triggered . The preventDefault method prevents an event from carrying out its default functionality

Example : If we want to Stop Form Submit on click of Submit Button in form we can use PreventDefault to stop the default form submit behaviour of submit button in form .

As its name tells it just prevent occurence of the default behavior of event like if you need to prevent the click to occur on click event or stop entering of symbols in textbox if its character then make a check it entered character is symbol on keypress press and execute preventdefault ( ) to prevent default behavior of execution of  event on keypress and nothing will enter in textbox if its symbol .

CODE EXAMPLE

<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
event.preventDefault();
event.stopPropagation();
$('a').text('Click event prevented');
$('a').contents().unwrap();
});
function executeParent() {
alert('here');
}
</script>

CODE EXPLANTION

If you execute the code above, the function executeParent() will not be called and you will not get the javascript alert. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to google.com. This is because we have prevented the default click action from triggering this time using event.preventDefault() method.

Difference Between http get and jsonp

An HTTP GET request is what you get when you enter a URI in your browser or when you click on a link on a web page. Certain HTML elements, like also generate GET requests. GET requests a resource from the server. You can pass additional information to a server-side script by adding 'query parameters' after the script, such as Example Domain.

Say you're on domain www.example.com, and you want to make a request to domainwww.example.net. To do so, you need to cross domain boundaries, a no-no in most of browserland.

Enter JSONP. When you make your request to a server that is JSONP enabled, you pass a special parameter that tells the server a little bit about your page. That way, the server is able to nicely wrap up its response in a way that your page can handle.

For example, say the server expects a parameter called "callback" to enable its JSONP capabilities. Then your request would look like:

http://www.example.net/sample.aspx?callback=mycallback

Without JSONP, this might return some basic JavaScript object, like so:

{ foo: 'bar' }

However, with JSONP, when the server receives the "callback" parameter, it wraps up the result a little differently, returning something like this:

mycallback({ foo: 'bar' });

As you can see, it will now invoke the method you specified. So, in your page, you define the callback function:

mycallback = function(data){ alert(data.foo); };

Major issue with JSONP

you lose a lot of control of the request that creates doubts in maintaining security

Angularjs Vs Jquery

Answer Angularjs Vs Jquery On Quora 
Angularjs Vs Jquery

jQuery will be used for things like higher level APIs, updating DOM elements, adding classes and wrapping XHR calls up nicely. Angular 1.x actually uses jQuery lite (jQLite) inside itself, or can use the full jQuery library if it's present before Angular at runtime. Using jQuery with Angular will unleash more power to Angular core as it knows you're using it, so it binds onto jQuery and passes you the full jQuery API instead of it's built-in jQLite.Remember that Angular is a data-binding MVVM framework, of which jQuery is not.

See The Major Benefits in Angular JS as Compared To Jquery

Below is Table List of Difference between jquery and Angularjs . See the Point search what that point means then analyze do you need the power or usage of that point in the project . On the basis of that Analyze Which one of them you need in your project

Difference between on and bind in jQuery

The .bind() method registers the event and event handler directly to the DOM element.This method is still very handy when wiring-up event handlers, but there are various performance concerns as are listed below.
Internally .bind() maps to .on() as per current version of Jquery .bind may be removed from future versions at any time. There is no reason to keep using .bind and every reason to prefer .on instead.
The .bind() method will attach the event handler to all of the anchors that are matched! That is not good. Not only is that expensive to implicitly iterate over all of those items to attach an event handler, but it is also wasteful since it is the same event handler over and over again.

Problems

1. The method attaches the same event handler to every matched element in the selection.
2. It doesn’t work for elements added dynamically that matches the same selector.
3. There are performance concerns when dealing with a large selection.
4. The attachment is done upfront which can have performance issues on page load.

The on() method as being “overloaded” with different signatures, which in turn changes how the event binding is wired-up. The .on method bring a lot of consistency to the API and hopefully makes things slightly less confusing.

Cons 1. Brings confusion because the behavior changes based on how you call the method.