How to use JavaScript EventTarget?

I gave up on this awhile ago, but recently needed it again. Here’s what I ended up using. ES6 class Emitter { constructor() { var delegate = document.createDocumentFragment(); [ ‘addEventListener’, ‘dispatchEvent’, ‘removeEventListener’ ].forEach(f => this[f] = (…xs) => delegate[f](…xs) ) } } // sample class to use Emitter class Example extends Emitter {} // run … Read more

Replacement for deprecated `keypress` DOM event

Since the event is deprecated, you should avoid using it in new code, and plan on removing it from old code. The W3C specification says this about deprecated features: Features marked as deprecated are included in the specification as reference to older implementations or specifications, but are OPTIONAL and discouraged. Only features which have existing … Read more

GWT Custom Events

Events in general: Events are always sent to inform about something (e.g. a change of state). Let’s take your example with a man and a wall. Here we can imagine that there is a game where a user can walk as a man in a labyrinth. Every time a user hits the wall it should … Read more

Tracking scroll position and notifying other components about it

I think the easiest way is each interested component listening to the scroll event. @Component({ … // alternative to `@HostListener(…)` // host: {‘(window:scroll)’: ‘doSomething($event)’} }) class SomeComponent { @HostListener(‘window:scroll’, [‘$event’]) doSomething(event) { // console.debug(“Scroll Event”, document.body.scrollTop); // see András Szepesházi’s comment below console.debug(“Scroll Event”, window.pageYOffset ); } } plunker Plunker using @HostListener() Hint: bootstrap(MyComponent, [ … Read more

How to disable mouseout events triggered by child elements?

The question is a bit old, but I ran into this the other day. The simplest way to do this with recent versions of jQuery is to use the mouseenter and mouseleave events rather than mouseover and mouseout. You can test the behavior quickly with: $(“.myClass”).on( { ‘mouseenter’:function() { console.log(“enter”); }, ‘mouseleave’:function() { console.log(“leave”); } … Read more