The kind of event you are working with is defined using the property type , it accepts a string value eg: onclick, mouseover etc.
If you can fugure out the event you can use one function to handle multiple types. The demo below explains in detail.
In the below demo, the above example is done using Event handling function which is called when the event occurs.
Using DOM to setup Event Handling
The Event handlers explained in the introduction were very simple and can be used to perform only basic tasks.
The below demo shows a basic application on using an Event Object and how to use the DOM to attach a function with an event.
There is a parameter called e. It is attached to an Event object created by the browser and that represents the event when it is triggered.
The property target is used to get the HTMLElement that triggered the event so that style rules can be applied to the element.
The Event listeners have a function similar to that of event handlers, the difference it that there is no limitation of the handler when assigning multiple function to the same DOM element and event.
The syntax of an event listener is bit different from an handler, it has no equal to sign and it looks similar to a native method.
The method addEventListeners() is used to register a single event listener on the document
These methods exist on all DOM nodes and accept three arguments :
- The event type to listen for(eg: mouseout, click, error etc)
- The event handler function to be executed when the event is fired.
- and a Boolean value(called useCapture) to denote whether to call the event handler i.e true and false
The keyword this used with event handler represents a reference to the HTML element which fired the event handler, thus giving an easy access to it.
You can add as many event listeners as you wish to an element.
In the below demo, the second text block is registered with two event handlers. When you roll the move over the content, the text is styled.
And when a click event occurs the background color and font-size is changed.
The method removeEventListener() is used to remove event listeners.(Obviously)
It too accepts three arguments : the name of event, the function to handle the event, the boolean value (or UseCapture).
The Boolean value true represents true for capturing event and false represents event bubbling(default)
Table : Functions and Properties of Event Object.
|type||To specify the name of the event.(i.e click, mouseout)||string|
|target||The element at which the event is to be triggered||HTMLElement|
|currentTarget||Current element whose event listeners are currently being invoked.||HTMLElement|
|eventPhase||The phase in the life cycle of an event.||number|
|bubbles||A true value is returned if the event will bubble through the document, or else a false is returned.||boolean|
|cancelable||A true value is returned if the event has a default action that can be cancelled, otherwise a false is returned.||boolean|
|timeStamp||To denote the time at which the event was created, if no time is available then 0 is returned.||string|
|stopPropogation()||To cancel any further event capturing or event bubbling. Can be used if bubbles is true.||void|
|stopImmediatePropogation()||It cancels any further event capturing or event bubbling and prevents any other event handlers from being called.||void|
|preventDefault()||It prevents the browser from performing the default action associated with the event||void|
|defaultPrevented||A true value is returned if the preventDefault() has been called.||boolean|