JS beginner to expert, study notes-6 (sec-11 Events) part-2

Propagation of events:

Events are propagated from lower to upper level. A parent div has many child div or other elements. Now, consider both parent div and a child div has individual onclick event listener. If we want that only child div’s event will be fired then we have to prevent the propagation of event.

Here result is parent element and heading is child element, both has a onclick event listener. If heading is clicked both event will be fired.

// HTML

<div id="result">
	<h1 id="heading">Sample Text</h1>
</div>

//JS

var result = document.getElementById("result");
var heading = document.getElementById("heading");

result.onclick = function(event){
	alert("from result");
};

heading.onclick = function(event){
	alert("from heading");
};

But if we want to abort the propagation i.e. stop the firing of events of any upper level elements, we have to use stopPropagation() as below:

heading.onclick = function(event){
	alert("from heading");
	event.stopPropagation();
};

Prevent default actions:

Lets assume we have a form and we have to make sure that user has given proper data before the form is submitted. Thats why we need to cancel/prevent the default action of the submit button. After checking we can submit the form.

//HTML
<form action="#" id="myForm">
	Email: <input type="text" name="name">
	<input type="submit" value="submit" id="btn">
</form>

//JS
var myForm = document.getElementById("myForm");
var btn = document.getElementById("btn");

btn.onclick = function(event){
	event.preventDefault();
	
	/*
	 * 	 *Verify the data or other work
	 */
	
	myForm.submit();
};

disable right click:

window.oncontextmenu = function () {
   return false;
}

Making own context menu:

For making own context menu, first we need to create a div which will look like a menu. Then set its position: absolute and display: none. Then when right button is clicked just make display: block and position as same as mouse pointer (via clientX and clientY).

// HTML
<div class="contextMenu">
	<div class="item">My Menu 1</div>
	<div class="item">My Menu 2</div>
	<div class="item">My Menu 3</div>
	<div class="item">My Menu 4</div>
	<div class="item">My Menu 5</div>
	<div class="item">My Menu 6</div>
	<div class="item">My Menu 7</div>
</div>

//Style
.contextMenu{
	background: #F0F0F0;
	position: absolute;
	display: none;
	box-shadow: 2px 2px 5px #999999;
}

.item{
	padding: 8px 85px 8px 25px;
	display: block;
}

.item:nth-child(2){
	border-bottom: 1px #cccccc solid;
}
.item:nth-child(3){
	border-top: 1px #ffffff solid;
}

.item a{
	text-decoration: none;
}

.item:hover{
	background: #D1E2F2;
}

//js
var contextMenu = document.querySelector(".contextMenu");
var item = document.querySelector(".item");

	
window.oncontextmenu = function(event){
	contextMenu.style.display = "block";
	
	contextMenu.style.left = event.clientX;
	contextMenu.style.top = event.clientY;
	
	return false;
};

Custom Go To Top link:

New functions to learn about: 1. window.pageYOffset 2. window.scrollBy(x, y)

window.pageYOffset gives the distance of how much we have scrolled along Y axis. i.e. downside.

window.scrollBy(0, 50) means we will go down by 50px each time the function is invoked.

window.scrollBy(0, -50) means we will go up by 50px each time the function is invoked.

// HTML
<div class="link">
	<p>Go to top</p>
	<p class="info"></p>
</div>

//CSS
.link{
	position: fixed;
	right: 15px;
	bottom: 15px;
	border: 1px #0000ff solid;
	padding: 5px 25px;
	display: none;
}

//js
var info = document.querySelector(".info");

window.onscroll = function(){
	var link = document.querySelector(".link");
	
	/*
	 *The following page checks for pageYOffset and sets 
	 *visibility of the link div accordingly. 
	 * 
	 */
	
	if(pageYOffset > 220){
		link.style.display = "block";
	}else{
		link.style.display = "none";
	}
	
	link.onclick = function(){
		window.scrollBy( 0, -1 * window.pageYOffset );
	};
	
	info.innerHTML = window.pageYOffset;
};

Movable drag n drop ball on screen:

simple version:

first crearted a div and gave it a look like a ball and position to absolute.
added a mousedown event. inside mousedown, we placed another eventlistener to check if the user is moving the mouse while it is down/clicked.
then setting the “left” property of the ball as clientX and “top” property as clientY. we deducted 100px for compensating ball size.

// HTML
<div id="ball"></div>

//css
#ball{
	position: absolute;
	height: 200px;
	width: 200px;
	border-radius: 50%;
	background: #0000ff;
	left: 550px;
	top: 200px;
	cursor: move;
}


// JS
var ball = document.getElementById("ball");

ball.onmousedown = function(e){
	document.onmousemove = function(e){
		ball.style.left = e.clientX - 100 + "px";
		ball.style.top = e.clientY - 100 + "px";
	};
};

ball.onmouseup = function(){
	document.onmousemove = null;
};

improved version:

in this version we are recording the mouse position (left & top) when it is down. Also, we are recording the position (left & top) of ball at that moment.
And when a mouse move occurs we checking the change of position of mouse and adding the changes in the ball’s position.

// HTML
<div id="ball"></div>

//css
#ball{
	position: absolute;
	height: 200px;
	width: 200px;
	border-radius: 50%;
	background: #0000ff;
	left: 550px;
	top: 200px;
	cursor: move;
}


// JS

var ball = document.getElementById("ball");

ball.onmousedown = function(e){
	var x1 = e.clientX;
	var y1 = e.clientY;

	var ballLeft =  parseInt( window.getComputedStyle(ball).getPropertyValue("left") );
	var ballTop =  parseInt( window.getComputedStyle(ball).getPropertyValue("top") );

	document.onmousemove = function(e){
		var x2 = e.clientX;
		var y2 = e.clientY;

		ball.style.left = ballLeft + (x2 - x1) + "px";
		ball.style.top = ballTop + ( y2 - y1 ) + "px";
	};
};


ball.onmouseup = function(){
	document.onmousemove = null;
};

setTimeout(), setInterval() & clearTimeout(), clearInterval()::

A general stopwatch

//HTML
<input type="text" id="startingValue">
<input type="button" value="start" id="buttonStart">
<input type="button" value="stop" id="buttonStop">

<div id="stopwatchHandler"></div>


// js
var buttonStart = document.getElementById("buttonStart");
var buttonStop = document.getElementById("buttonStop");
var stopwatchHandler = document.getElementById("stopwatchHandler");


var intervalRefId;
buttonStart.onclick = function(){
	
	if(intervalRefId){
		clearInterval(intervalRefId);
	}
	
	var startingValue = document.getElementById("startingValue").value;
	stopwatchHandler.innerHTML = startingValue;
	
	intervalRefId = setInterval(function(){
		if(startingValue < 1){
			clearInterval(intervalRefId);
			return;
		}
		stopwatchHandler.innerHTML = --startingValue;
	}, 1000);
	
};


buttonStop.onclick = function(){
	clearInterval(intervalRefId);
};

Object Oriented approach:

My Blog