DOM events and JQuery events

Demo about: How to handle events in JQ and plain JS. When we use preventDefault() and stopPropagation() on JQ event object, it doesn't stop the DOM events from executing / propagating. If we want to achieve that, we need to use event.originalEvent as well.

by Vivek Athalye

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<form id="frm" method="post">
<input type="text" class="txt">
<input type="submit">
<div class="output"></div>
</form>

JavaScript

$(function(){


$("#frm").submit(function(evt){
	$(".output").append("jq first submit called<br/>"); 
	if($(".txt").val() == ""){
		evt.preventDefault();
		evt.stopImmediatePropagation();
		// we need to use .originalEvent too; to stop default handler like form.onsubmit
		//evt.originalEvent.preventDefault();
		//evt.originalEvent.stopImmediatePropagation();
	}
});

$("#frm").submit(function(evt){
	$(".output").append("jq second submit called<br/>"); 
	if($(".txt").val() == ""){
		evt.preventDefault();
		evt.stopImmediatePropagation();
	}
});

document.forms[0].onsubmit=function(e){
	$(".output").append("form onsubmit called<br/>"); 
	if($(".txt").val() == ""){
		e.preventDefault();
		e.stopImmediatePropagation();
	}
}

document.forms[0].addEventListener('submit', function(ev) {
  $(".output").append('Form submission event handler called.<br/>');
	if($(".txt").val() == ""){
		ev.preventDefault();
		ev.stopImmediatePropagation();
	}
});

document.forms[0].addEventListener('submit', function(ev) {
  $(".output").append('Last handler called.<br/>------<br/>');
	ev.preventDefault();
	ev.stopImmediatePropagation();
});

});