Series: Drag-n-Drop Image Uploads

Browser Events

Published on Jun 27, 2015

Browser Events are the core of user interaction. Ember has built some layers so you don't have to constantly think of them, but there's great power in knowing how to work with them.

Today we'll explore using the click event on a component, see how to fix common problems, and then take a peek at the vast array of browser events available.


Links

Code

//alert-maker
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'button',
  click: function(event){
    alert('you clicked an alert');
    return false;
  }
});
{{#alert-maker}}
  An Alert
{{/alert-maker}}

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.

Drag-n-Drop Image Uploads

Subscribe to our mailing list