How does JS events execute in Blazor?

[zxyao145]

For the following code, JS will output "1 child mouseup", "2 child mouseup end", "3 parent mouseup" in sequence

<div id="parent">
    <div id="child">
      child
    </div>
  </div>
  <script>
    document.getElementById("parent").addEventListener("mouseup", () => {
      console.log("3 parent mouseup");
    });

    document.getElementById("child").addEventListener("mouseup", () => {
      console.log("1 child mouseup");
      // Simulate a time-consuming operation
      for (let i = 0; i < 10_0000; i++) {
        var text = i + "j: ";
        for (let j = 0; j < 10_000; j++) {
          text += " " + j;
        }
      }
      console.log("2 child mouseup end");
    });
  </script>

If we use Blazor to implement it, it will output "1 child mouseup", "3 parent mouseup", "2 child mouseup end" in sequence

<div id="parent"
     @onmouseup="OnParentMouseUp">
    <div id="child"
         @onmouseup="OnChildMouseUp">
        child
    </div>
</div>


@code {

    private void OnParentMouseUp()
    {
        Console.WriteLine("3 Parent mouseup");
    }

    private async Task OnChildMouseUp()
    {
        Console.WriteLine("1 Child mouseup");

        await Task.Delay(10000);

        Console.WriteLine("2 Child mouseup end");
    }
}

[En3Tho]

Your js code is simulating load synchronously, it doesn't yield to the thread pool / event loop while your blazor code does.

[zxyao145]

Yes, how does Blazor handle events asynchronously, does it use setTimeout? I searched for the source code, but I'm sorry I couldn't find it. Can you help me point it out?

[En3Tho]

Sorry, I can't point you to the code. I just pointed that if you did simulate load synchronously in blazor like you did in js output would've been the same I think.

I think you should check out dotnet/runtime repo sources. Blazor runs on Mono runtime. That's there Mono's sources are, not here. Or maybe someone from the runtime team can answer here.

I belive @pavelsavara can help with this question

[zxyao145]

Get it, thank you very much for your answer!

[pavelsavara]

https://github.com/dotnet/runtime/blob/ddd663d257aa2206583287309a2109e1835f1b2f/src/mono/wasm/runtime/scheduling.ts#L66

[En3Tho]

@pavelsavara Thank you!

[zxyao145]

https://github.com/dotnet/runtime/blob/ddd663d257aa2206583287309a2109e1835f1b2f/src/mono/wasm/runtime/scheduling.ts#L66

@pavelsavara Thank you very much for your answer! This is exactly the source code I want to read.

[zxyao145]

@pavelsavara Hi, I have another question to ask.

I have two components: the child component uses @onclick to add event, while the parent component uses native JS to add events through IJSRuntime. However, using @onclick:stopPromotion="@true" on the child component does not prevent the parent component from responding to click events.

Is Blazor's handling of events similar to React?

Child.razor

<span style="border: 1px solid red;"
      @onclick="OnClick"
      @onclick:stopPropagation="@true">
    child
</span>

@code {
    private void OnClick()
    {
        Console.WriteLine("child click");
    }
}

Parent.razor

@inject IJSRuntime JsRuntime

<div @ref="@_ref" id="parent">
    <Child />
</div>

@code
{

    private ElementReference _ref;
    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            JsRuntime.InvokeVoidAsync("addClick", _ref);
        }
        return base.OnAfterRenderAsync(firstRender);
    }
}

addClick method:

window.addClick = function (dom) {
    dom.addEventListener("click", (e) => {
        console.log("on click", dom.getAttribute("id"));
    })
}

the log:

[pavelsavara]

I don't know. @javiercn ?

[zxyao145]

@javiercn Hi, could you help me take a look at this question?