Transcript

Browser events are how you interact with the browser. The most common ones are click and submit. We use those almost every time we press a button. But we also have focus-out, keypress, mousemove, and many others.

How do we use these events in Ember? Well traditionally, that has been done with the views, but views are being phased out. Today, we’re going to use components to handle our browser events.

Let’s create a component called alert-maker . We’ll give it a click method which will capture any click browser events that occur within the bounds of the component. In this method, we’ll stay true to the alert-maker name and call an alert. We’ll also give it a tagName of a button , just so it’s more visible. In our template, we’ll create an instance of the alert-maker component and then put some text inside it.

There’s our ‘Click me’ button. We’ll click it and it creates an alert, just like we expected. So clicking it creates a browser event which is then caught by the component.

There is one thing you need to watch out for, event bubbling. When you initiate the click browser event, it starts with the smallest DOM element at the place you clicked, and then it bubbles up to larger elements, triggering any click handlers that are on any of them. It just so happened that in the example we gave, only one component had a method that was triggered by the click event. That’s not always the case.

To show how this can go wrong, let’s nest several alert makers. When we click the button, it will show an alert, and then another alert, and then another alert. That’s because it triggers the click method on not just the button we clicked, but on all the parent components.

The way to stop this bubbling is to return false at the end of the method. So we’ll go to our handler and we’ll return false. Then when we click on this, it’ll only give us one alert.

Another gotcha involves browser event defaults. We didn’t encounter these in today’s example, but if things are happening strangely that you don’t expect, try calling event.preventDefault . We’ll cover this more in this week’s pro-episode since we’ll need to use it to make a browser event do what we want.

Ember comes with built-in support for a total of 27 browser events. If that’s not enough for you, Ember allows you to define support for other browser events. There are 160 events in the MDN documentation that are standard across most browsers and several more nonstandard ones.

So that’s our crash course in browser events. I hope to see you in the pro-episode where we use the built-in browser events, drag over and drop, to create a drag and drop interface for our file upload. I’ll see you there.