Browser.events vs Html.events

Learn
1

Hi, I would like some advice on keyboard input. When could I use HTML events and when could I use Browser.events. What are the pros and cons?
Do I have to use Browser.events for example if dynamically creating text boxes in SVG such as to allow a user to add a label to a diagram wherever they want?
I am assuming that Browser.events is more general than Html.events and covers everything that Html.events can do.

Finally is it a bad idea to use both in the same program?

Thanks

PS I also asked this on Slack beginners.

2

Hello and welcome to this community!

What events exactly do you have in mind? The events declared in Browser.Events and Html.Events don’t overlap that much.
Usually you’d want those in Html.Events attached to some element/node in your site/DOM and the ones in Browser.Events are global (not associated with some node - or with the browser-window if you like).

1 Like
3

I would like to be able to have something like a form users can fill in and the ability for users to add labels to diagrams wherever they choose

4

On first glance filling in form-fields should be via Html.Events (probably onInput).

For the labels it might depend on how you want to draw the diagrams - are those Images and do you want to place the labels as HTML elements with positioning via attributes? Then maybe Browser.onMouseDown for the clicks - but I think this will get nasty with calculation.

Or are you using a SVG? Then it’s pack to HTML-Events (or SVG events - probably defining your own so that you can get the coordinates from the MouseEvent).

5

You would use Browser.Events when you don’t care about the active context in the DOM. While Html.Events are localised and are executed in the context of the element.

For example, you can use Html keyboard events when you are implementing Select Menu and you want to capture ArrowDown and move hovered item to next in a list for the focused Select Menu.

You would use Browser keyboard events when you don’t care about the context. The only thing what matters is that user pressed particular key. For example, if user presses ctrl+s, you want to open search panel. Irrespective which element is focused in the UI.

3 Likes
6

HI Carsten, yes I am trying svg text as well. I am just not able right now to see how I can make it accept user keyboard input like I can with pure html.

I have been looking both at Svg.text_ and Svg.foreignObject but neither have been able to accept use keyboard input the same way as with html directly.

7

if it’s no input-element the browser will likely trigger input events. In this case use the global from Browser - clicks should work though.

1 Like
8

Thanks for your reply.

9

I usually avoid Browser.Events.onKeyDown altogether, since it does not prevent the default action: Way to `preventDefault` on `Browser.Events` needed · Issue #89 · elm/browser · GitHub

When I’ve needed a global key listener, I’ve done it with a port instead.

10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.