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

We need to track events on browser. An event is said to be happened when something like click, mouseover, keypress etc happened. JS can take action based on events. The important events list:

1. onmouseover: when the cursor is over (enter) the element
2. onmouseout: when the mouse is leaving the element
3. onmousemove: when the cursors is moving on element
4. onclick: when the element is clicked
5. ondblclick: when the element is fast double clicked
6. onclilck is a combination of onmousedown and onmouseup

Assigning a function to an Event:

If a function takes argument, then we cant assign that function directly to an event. Using that function will result in immediate invocation of that function during JS execution phase. Because when JS parser sees any function with “()” , it is immediately executed.

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

test.onclick = alert("Hello");    //result in error as alert takes argument.

//correct procedure

test.onclick = function(){
	alert("Hello");
};

We can only directly assign a function to an event (without “()” or invocation sign and without any params):

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

function clickEvent(){
	alert("Hello World");
};

test.onclick = clickEvent;

Using a function without invocation sign means we are just placing the function in string format.

Best way to assign a function (which takes args) to an Event:

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

function clickEvent(name){
	alert("Hello " + name);
};

test.onclick = function(){
		clickEvent('sajib');
};

“this” ::

// using "this" keyword to refer the element from which an event is originated.
var test = document.getElementById("test");

function changeColor(){
	this.style.color = "blue";
};

test.onclick = changeColor;

Assigning an event directly to an element has some problem. Suppose, we’ve assigned a “onclick” event to an element as test.onclick = foo1; Now if we want to assign a new activity of test.onclick = foo2; then the later function will override the 1st one. For any given element, we can invoke only one function for an event. To overcome this problem, we have to use addEventListener().

addEventListener() This function empowers us to invoke/assign multiple tasks for same event on same element.

// multiple tasks for one event
var test = document.getElementById("test");

function changeColor(){
	this.style.color = "blue";
};

function greet(){
	alert("hello");
};

test.addEventListener('click', changeColor);    //task-1
test.addEventListener('click', greet);    // task-2

Practise: increasing font size on click

// increasing font size
var test = document.getElementById("test");

function increaseFont(){
	var font = window.getComputedStyle(this).getPropertyValue("font-size");
	var font = parseInt(font);
	
	
	this.style.fontSize = ++font + "px";
};

test.addEventListener('click', increaseFont);

Removing specific event listner by removeEventListener();

// increasing font size
var test = document.getElementById("test");
var stop = document.getElementById("stop");

function increaseFont(){
	var font = window.getComputedStyle(this).getPropertyValue("font-size");
	var font = parseInt(font);
	
	
	this.style.fontSize = ++font + "px";
};

test.addEventListener('click', increaseFont);

stop.addEventListener('click', function(){
	test.removeEventListener('click', increaseFont);
});

Event Object:

If a function is assigned to any event of an Element then that function’s first parameter is always the event object.

Whenever an event fires, the computer places appropriate data about the event into the event object – for example, where the mouse pointer was on the screen at the time of the event, which mouse buttons were being pressed at the time of the event, and other useful information.

// increasing font size
var result = document.getElementById("result");

result.onmousemove = doSomething;


function doSomething(e){
	var tmp = document.getElementById("tmp");
	tmp.innerHTML = e.altKey;
}

various event object properties:

Event Object Property	Description
SrcElement	The element that fired the event
type	Type of event
returnValue	Determines whether the event is cancelled
cancelBubble	Can cancel an event bubble
clientX	Mouse pointer X coordinate relative to window
clientY	Mouse pointer Y coordinate relative to window
offsetX	Mouse pointer X coordinate relative to element that fired the event
offsetY	Mouse pointer Y coordinate relative to element that fired the event
button	Any mouse buttons that are pressed
altKey	True if the alt key was also pressed
ctrlKey	True if the ctrl key was also pressed
shiftKey	True if the shift key was also pressed
keyCode	Returns UniCode value of key pressed

Sending other args in addition to event object

// increasing font size
var result = document.getElementById("result");

result.onmousemove = function(event){
	var str = "X coord is : ";
	doSomething(event, str);
};

function doSomething(event, str){
	var tmp = document.getElementById("tmp");
	tmp.innerHTML = str + event.clientX;
}

target.tagName:

Suppose if you assigned an event to a div. But the event may be fired from any child element of that div. By event.target we can find that child element. event.target.tagName gives the tag name of the element from which an event is fired.

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

/*
 * event is the htmlMouseEvent
 * str is the original element (result) to which event is registered.
 * 
 * event.target returns the direct element from which the event originated
 * i.e. main event maybe assigned to div but the event maybe triggered from a child element
 * of that div.
 * 
 * so event.target.tagName returns the tagname from which the event is triggered.
 *    
 */

function doSomething(event, str){
	var tmp = document.getElementById("tmp");
	tmp.innerHTML = event + " | " + str.tagName + " | " + event.target.tagName;
}

/*
 * Event is happening here and the anonymous func is being called.
 * inside the function we are calling another function with additional params.
 * "this" simply refers to the object (here result) to which the event is assigned.
 * 
 */ 

result.onmousemove = function(event){
	doSomething(event, this);    //"this" refers element to which the event is assigned
};