JS Events and JS Operators

0 95

JS Operators Events Handling Bubbling Life Cycle OnkeyEvents

In this tutorial,we will focus on js Operators Events Handling Bubbling Life Cycle OnkeyEvents and also we will discuss briefly on javascript operates

Events in JavaScript

Consider an online shopping website where a web form is provided for customers to fill appropriate details and click the submit button when the customer will click submit button form is submitted to the server for validation purpose.in this case, when a customer clicks the button event occurs.

Some common events in JavaScript are mouse clicks, keystrokes, and so on.

Event Handling

Event Handling is a process to handle an event when the event occurs. This is done by using an event handler. The event handler is a piece of codes, functions that defines the action to be performed when the event is trigged.
When an event is generated event handler function is invoked. The information about this generated event is updated on the event object. An event object is a built-in object, which can be accessed through the window object.

Event Bubbling

Event Bubbling is a process that allows a web developer to defines an event handler for all child elements. This means parent element handles all the events which generated by child elements.
For example, you want to make italic text bold of each paragraph when the user clicks a particular button. Instead of declaring event fo reach italic text you can declare it within the paragraph. This allows a user to apply bold to italic text. This will reduce development time and efforts since it minimizes the code.

event-bubble-in-javascript
event-bubble-in-javascript

Life Cycle of an Event

An event life cycle starts when a user clicks on button. It sends when event handler provide response to a user. The steps involved in the life cycle of an event are…

  • The user performs an action to raise an event.
  • The event object is updated to determine the event state.
  • The event is fired.
  • The event bubbling occurs as the event bubbles through the elements of the hierarchy.
  • The event handler is invoked that performs the specified actions.

Keyboard Events

Keyboard Events occurs when keys are pressed or released from the keyboard.

Different keyboard event are…

Onkeydown

Onkeydown event Occurs when a key is pressed down.

Onkeyup

Onkeyup event Occurs when the key is released.

Onkeypress

Onkeypress event Occurs when a key is pressed and released.

Mouse Events

Mouse Event occur when a user clicks a mouse button.

Events Description
onmousedown When the mouse button is pressed onmousedown event occur.
onmouseup When the mouse button is released onmouseup event occur.
onclick When a mouse button is pressed and released Onclick event occur.
ondblclick When a mouse button is double-clicked Ondblclick event occur.
onmousemove When the mouse pointer is moved from one location to other onmousemove event occur.
onmouseover When the mouse pointer is moved over the element onmouseover event occur.
onmouseout When the mouse pointer is moved out the element onmouseout event occur.

Focus and Selection Events

Focus allows you to set or reset focus for different input elements. When an element or a part of an element within a Web page is selected,selection events occur.

Events Description
onfocus when an element gets focus
onblur when an element loses focus
onselectstart when the selection of an element starts onselectstart event Occurs
onselect when the present selection changes onselect event occurs
ondragstart when the selected element is moved ondragstart Occurs

JS Operators

Operators used to perform operation on two or more values of variable and expressions. JavaScript provide different type operators to perform calculations and evaluations. For example 2*2 is an expression where 2 and 2 are operands and * is operator.

Operators and their Types

JavaScript supports six type pre-defined operators to perform different operations.

  • Arithmetic operators
  • Relational operators
  • Logical operators
  • Assignment operators
  • Bitwise operators
  • Special operators

Arithmetic Operators

These operators use to perform arithmetic operation on two operands. Operators appears in two operands to perform operation. Arithmetic operates consists on + (Addition), – (Subtraction), / (Division), % (Modulo), and * (Multiplication).

Arithmetic Operator Description Example
+ Addition Performs addition 5+5
Subtraction Performs subtraction 10-5
* Multiplication Multiplies the two operands 10*10
/ Division Divides the first operand by the second operand 25/5
% Modulo Divides the first operand by the second operand and returns the remainder 90%20

Increment and Decrement Operators

The increment and decrement operators are unary operators the increment operator ++ increases the value by 1, while the decrement operator — decreases the value by 1. Increment and Decrement Operators operates only on a single operand. Expression is called pre-increment or pre-decrement if Increment and Decrement Operators placed before the operand.Expressionis called post-increment or post-decrement if the operator is placed after the operand.

Relational Operator

Relational Operator used to test relation between two operand and return Boolean values in case of true or false.

Relational Operator Description Example
== Equal to checks whether the two operands are equal 60 == 65
!= Not Equal to checks whether the two operands are not equal 49 != 49
=== Strict Equal to checks whether the two operands are equal and whether are of the same type 30 === 34
!== Strict Not Equal to checks whether the two operands are unequal and whether are not of the same type 18 !== "20"
> Greater Than checks whether the left operand is greater than the right operand 55 > 35
< Less Than checks whether the left operand is less than the right operand 24 < 36
>= Greater Than or Equal to checks whether the left operand is greater than or equal to the right operand 32 >= 23
= Less Than or Equal checks whether the left operand is less than or equal to the right operand 85 <= 95

Logical Operator

Logical Operator are binary operates used to perform logical operations on two operands.

Logical Operator Description Example
&& AND Returns true if both expression are evaluated to true (x == 32) && (y == 35)
! NOT Returns false if the expression is true and vice-versa !(x == 7)
|| (OR) returns true is one of operand is true (x == 8) || (y == 9)

Assignment Operator

Assignment Operator used to assign the value from right side operands to left side operands by using the equal to operator =
Java Script assignment operates divided into two categories.

Simple assignment operator

is a Simple assignment operator which used to assign the value from right side operands to left side operands.

For example
result = x + y;

Compound assignment operator

Compound assignment operator is formed by combining the simple assignment operator with the arithmetic operators.

For example
emp_salary -= eval(emp_salary * tax / 200);

Bitwise Operator

Bitwise operators represent their operands in bits(zeros and ones) and perform operations on them. However, they return standard decimal values.

Bitwise operators Description Example
& Bitwise AND Bitwise AND Compares two bits and returns 1 if both of them are 1 or else returns 0 a & b Returns 8 (00001000)
~ Bitwise NOT Inverts every bits of the operand changes its sign and subtracts by 1. It is a unary operator ~a Returns -10
| Bitwise OR Bitwise OR Compares two bits and returns 1 if the corresponding bits of either or both the operands is 1 a | b Returns 15 (00001111)
^ Bitwise XOR Bitwise XOR Compares two bits and returns 1 if the corresponding bit of eithe but not both the operands is a ^ b Returns 7 (00000111)

Special Operator

There are some operator in JavaScript which don’t belongs to any categories of JavaScript called Special Operators.

Special operators are..

  • ,  (comma)
  • ?:  (conditional)
  • typeof

Comments

comments

Leave A Reply

Your email address will not be published.