Its very easy wayto make your component responsive.
it’s so easy right? you can attach helllot of events, few of them i described below.
|onchange||An HTML element has been changed|
|onclicke||The user clicks an HTML element|
|onmouseovere||The user moves the mouse over an HTML element|
|onmouseoute||The user moves the mouse away from an HTML element|
|onkeydowne||The user pushes a keyboard key|
|onloade||The browser has finished loading the page|
Note : dont use ‘on’ when passing your event to method addEventListener
Now as you see there are 3 parameters to method :
- First is event you would like to attach.
- Second is function you want to execute on event happen.
- Third is called useCapture, its little intresting, let me explain you in brife below.
When the browser event system was first designed, there were two conflicting ways that how shoudl it behave. That is called as capture and bubbling
If an event (e.g. a click) happens on the a element, should the parent elements know? It was widely accepted that they should. But the question was in what order they should be notified. The Microsoft and Netscape developers had differing opinions.
One model was event capture (advocated by the Netscape developers). This notified the html element first and worked its way down the tree:
The other model was event bubbling (advocated by the Microsoft developers). This notified the target element first, and worked its way up the tree:
According to Mozilla Developer Network useCapture is :
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation
Happy Codeing …. :)