JavaScript Global Event Mechanism

JavaScript global event mechanism

Does this help you:

<script type="text/javascript">
window.onerror = function() {
alert("Error caught");
};

xxx();
</script>

I'm not sure how it handles Flash errors though...

Update: it doesn't work in Opera, but I'm hacking Dragonfly right now to see what it gets. Suggestion about hacking Dragonfly came from this question:

Mimic Window. onerror in Opera using javascript

Event delegation and the global `event` object in Ember action

First why would you migrate to {{action "dragEnd" on="dragEnd"}}?
Thats the oldest style of ember actions and you shouldnt use them.
Use ondragend={{action "dragEnd"}} or better {{on "dragEnd" this.dragEnd}} when using a new action decorated with @action.
If you have your action in the actions hash use {{on "dragEnd" (action "dragEnd")}}.

and while window.event is a browser feature I woudlnt use it! Reference to MDN:

You should avoid using this property in new code


  1. is correct. basically:

    • the {{action modifier (used without = before the {{action) will not attach any native event handlers, but waits for the event to bubble up to body where the event must already be registered (ember does this for a preset list of events) and then use a ember internal handling mechanism to trigger your action.
      This is basically from the old days, you should migrate away from it.
    • when you do eventname={{action you use the {{action helper. While it has the same name as the modifier it is not the same thing at all. The {{action helper just finds the action in the actions hash on your class, creates a bound action with maybe passed parameters and binds it to the correct this. Then this resulting action is assigned to the eventname property of the HTML DOM Element.
      This was a long time a very common way to do things, but never the officially preferred one. However its still a pretty good way to do things. The primary downside is that you cant add multiple actions to the same event. so onclick={{action "foo}} onclick={{action "bar}} on the same Element wont work.
    • the new {{on modifier is the new way to go with ember octane. It basically runs addEventListener. This allows to add multiple handlers as the {{action modifier does, but uses far less ember magic and directly adds the event to the DOM Element, not using any strange magic with custom event delegation. However it does not do any action lookup. So the second parameter directly needs to be a bound function that can be passed to addEventListener. For ember octane you would define the action directly on the class and add the @action decorator to it, which will basically create a bound function with the correct this context (it also adds the function to the actions hash to add compatibility with the {{action modifier and helper). For classic style actions you can use the {{action helper to look up the action and then pass it to the {{on modifier. Then you basically result in {{on "click" (action "myAction")}}.

So what to do:

  • try to avoid <button {{action "myAction" on="click"}}> whenever possible. migrate away from it.
  • when using classic style components/classes with Component.extend({ use <button onclick={{action "myAction}}> or <button {{on "click" (action "myAction")}}>.
  • when using native classes and/or glimmer components and you have your action decorated with the @action decorator use <button {{on "click" this.myAction}}>.

Global event handler in Angular

Basically you need to write a ng-change to update on change.
your html will become:

  <body class="dashboard" ng-app="app" ng-controller='myController'>

<select ng-change='selectChanged()' ng-model='myModel' name="active_project" id="active_project">
<option value=""></option>
</select>
<div id="content" ui-view></div>

</body>

You will also need to define a controller to listen to that change:

app.controller('myController', ['$scope', '$rootScope', function(scope, rootScope){
scope.selectChanged = function(){
rootScope.something = scope.myModel;
alert(rootScope.something);
}
}]);

I have also added a link to a functioning fiddle.

After having given you the solution, I would like to add it is not a good idea to have value in rootscope. If you post what you are trying to achieve may be somebody here can guide you better.

Hope this helps.



Related Topics



Leave a reply



Submit