How can we get the original event in ember's action

In Ember 2...

Inside your action you always have access to the Javascript event object which has the DOM element e.g.

actions: {
    myAction() {
        console.log(event.target) // prints the DOM node reference
    }
}

The event is not passed using the action helper. If you really want the event object, you need to define a view and use the click event:

App.MyLink = Em.View.extend({
  click: function(e) {
  }
});

and then:

<li>{{view App.MyLink}}</li>

but requiring access to the dom event is a rare case, because you can pass arguments to {{action}}. In your case:

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>

and in the event:

activateView: function(id) {
  console.log(id);              
}

There are two ways you can receive event object in actions,

1.If you are using component, then you can define any of this list of event names in component and that is designed to receive native event object. eg., {{my-button model=model}}

export default Ember.Component.extend({
 click(event){
  //oncliking on this componen will trigger this function
  return true; //to bubble this event up
 }
})

2.If you are using html tag like button then you need to assign a (closure) action to an inline event handler.

{{#each item as |model|}}
      <button onclick={{action 'toggle' model}}>{{model.title}}</button>
{{/each}}

In actions hash toggle function will always receive native browser event object as the last argument.

actions:{
 toggle(model,event){

 }
}

In the below format, action toggle will not receive event object,

  • <button {{action 'toggle'}}>{{model.title}}</button>
  • Input helpers such as {{input key-press="toggle" and {{text-area key-press="toggle"

Explained really well in ember guide https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions

Tags:

Ember.Js