What is the difference between happening of event on element and emiiting an event from element in dom?

Question

I want to understand when I click a dom element, then click event happens on that element and associated event-handler function is called. This is a basic example of an asynchronous function. My question is related to implementations behind this. When we click on any dom element on the user screen, click event happens. What is the difference between the happening of the event on the element and emitting of an event by element? Happening and emitting are same? If not, then what is the difference?

Also when we register a callback function, Where they are stored in memory? I am not asking about event-loop here(main stack and callback queue).

How events objects are created and who creates them? How an event is mapped to associated callback function?

score 0 · Answer 1 · answered Apr 21 '19 at 08:13

Wow, many questions all at once. Hehe, the meta guys will not like it! But this will also require a long & detailed answer.

What is the difference between the happening of the event on the element and emitting of an event by element?

This difference is not conventional [yet]. So this mainly springs from my own observations and I think few will disagree with me.

Happening and emitting are same?

No, they are different.

If not, then what is the difference?

The happening is the fact that the user actually did something: click, scroll, drag start, drag end, hover, right-click, etc...

The emitting is the logic associated with a happening. Actually, you can run the event emitting without waiting for a specific happening.

EXAMPLE :

The following code attaches a listener to the click event.

const actionable = document.querySelector( 'button[type="button"]' );

actionable.addEventListener( 'click', () =>
{
    alert( 'Clicked me' );
});

<button type="button" class="click-me">
  Click me
</button>

The callback there will be executed whenever the click event is emitted. Note ye that I said, when the click event it will be emitted. (Not when the user will click it.)

Now, web browsers ensure that when the user clicks, that click event is triggered and the DOM API ensure that our callback is executed. This the happening of the user that started it.

However, we can still mimic that behaviour without the user actually clicking.

const actionable = document.querySelector( 'button[type="button"]' );
const actionableState = document.querySelector( 'button[type="button"] > span' );

const hoverable = document.querySelector( 'div.hover-me' );
const hoverableState = document.querySelector( 'div.hover-me > span' );

let count = 0;

actionable.addEventListener( 'click', () =>
{
    actionableState.innerText = ++count;
});

hoverable.addEventListener( 'mouseenter', () =>
{
    hoverableState.innerText = 'Hovered';
    
    const event = new Event( 'click' );
    
    actionable.dispatchEvent( event );
});

hoverable.addEventListener( 'mouseout', () =>
{
    hoverableState.innerText = '-';
});

.click-me > span {
    font-style: italic;
}
.click-me > span:before { content: '[ '; }
.click-me > span:after { content: ' time(s) ]'; }

.hover-me {
    padding: 3em;
    margin: 1em 0;
    text-align: center;
    border-radius: 3px;
    background-color: red;
    display: inline-block;
}

<button type="button" class="click-me">
    Click me <span>0</span>
</button>

<div class="hover-me">
    Hover me, please
    <br/>
    <span>-</span>
</div>

When the user hovers the box, we simulate the click event. We kinda create an artificial click event and we emit it ( dispatchEvent() ). This' basically event emitting.

Where they are stored in memory?

Yes, in-memory. When the page dies (or is closed) or the JS runtime crashes, they all pass away.

How an event is mapped to associated callback function?

This implementation-dependent. If you're really committed to seeing how it can be achieved, you may check this Event API implementation: it's TypeScript but you won't find it hard to. (I'll admit that code has a bunch of comments). But while I used WeakMap there, other implementations rely on object map + array, or event Set.

If not, then what is the difference?

The internal difference between an event that happened and one that has been handcrafted lies in the isTrusted (boolean) attribute which is true when the event is triggered by a user action/input and false otherwise. It is documented here.

What is the difference between happening of event on element and emiiting an event from element in dom?

1 Answers1