src/ui/components/component.js
function trigger(eventName, details) {
    const evt = new CustomEvent(eventName, {
      detail: details,
      bubbles: true,
      cancelable: true,
    });
    this.dispatchEvent(evt);
    return !evt.defaultPrevented;
  }
function trigger(eventName, details) {
    const evt = new CustomEvent(eventName, {
      detail: details,
      bubbles: true,
      cancelable: true,
    });
    this.dispatchEvent(evt);
    return !evt.defaultPrevented;
  }
function trigger ( eventName , details ) { const evt = new CustomEvent ( eventName , { detail : details , bubbles : true , cancelable : true , } ) ; this . dispatchEvent ( evt ) ; return ! evt . defaultPrevented ; }
Triggers a dom level event which bubbles up the dom.

Call with an event name and a `detail` object:

```
this.trigger('something-happened', {
someSortOf: 'value'
});
```

The `someSortOf` key, and any other keys you pass into that object can be accessed via `evt.detail.someSortOf` or `evt.detail.xxxx`:

```
// Listen for the something-happened event which because it bubbles up the dom,
// can be listened for from any parent node
document.body.addEventListener('something-happened', function(evt) {
console.log(evt.detail.someSortOf);
});
```

{@link Layer.UI.Component#events} can be used to generate properties to go with your events, allowing
the following widget property to be used:

```
this.onSomethingHappened = function(evt) {
console.log(evt.detail.someSortOf);
});
```

Note that events may be canceled via `evt.preventDefault()` and your code may need to handle this:

```
if (this.trigger('something-is-happening')) {
doSomething();
} else {
cancelSomething();
}
```

@method trigger
@protected
@param {String} eventName
@param {Object} detail
@returns {Boolean} True if process should continue with its actions, false if application has canceled
the default action using `evt.preventDefault()`
Triggers a dom level event which bubbles up the dom .