The Standard Event Model

Hi people! In this lesson we are going to talk about event model that how can we add or remove events in our projects. In previous lesson we talk about Dom level zero event handler and we found also a problem there that they can easily overwrite by us and can stop the all function so how can we sought out this problem by using Standard Event Model, let see.

Note : Standard Event Model is design for dealing with multiple event handlers. We can use this with add event listener.

Add Event Listener

Add Event Listener is method for use one or more event handlers together, By nature it's contains three arguments.
1. click : Event handler
2. function name: Who going to use by click method
3. In case of using 3rd argument we have to tell browser that we want to use capturing(true) or bubbling(false). We have specified in our code true or false.
A {Capture} : This function is read code top to bottom. Implied By true
B {Bubbling}: This function read code direct from id's. Implied By false

Note: While we using bubbling method than we don't need to use Onload Event Handler

Example : In this example we are using multiple event handling with addEventListener.

Remove Event Listener

We can use this function for remove or disabled our event handler. This is nice one line code.
Note : While using removeEventListener we have to mention function name into second argument if we use direct function so it may be not going to work because while we pass direct function into it than it search same objects and it can be possible that developer done any mistake while passing the same function who we already add in addEventListener. So always remember to use function name in it.

Passing the function name is right way, not function its self.

Event Delegation or Event Passing into function

Event Prevent Default

event.preventDefault();

It's prevent the default action of the event and forward element than event is fired off. Mainly use for stop functionality of event without reject to function.