There is a duplicate for each event on react audio and video tags, for example it has onCanPlayThrough property and onCanPlayThroughCapture as well. Behaviour for both of them in the browser is completely the same.
Do we need to use ...Capture events instead of standard events? What is the main idea for them? Where can I find information about them.
This is covered in the React documentation here, though it's easy to miss:
The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.
DOM events have multiple phases (see diagram below), which are (in order):
Capture
Target
Bubbling
Normally we use target or bubbling (addEventListener's false third param [the default]), but there are rare occasions where you want to hook into the capture phase instead (third param = true). The ...Capture handlers let you do that.
They are not the same and the documentation also states this:
The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.
The effect is the same as in regular DOM bubbling/capturing. If you want to capture, the event will fire on a parent first. On bubbling it will fire on the actual element first and then bubble to parents.
Related
How I can check if event was fired programmatically?
Namely I have an Ext.tree.Panel and listen for it selectionchange event. How I can check within handler if event was fired manually by user (row click) or via select() method?
option 1 :
For most of the events eOpts arguments is passed to event. Depending on the event this is fill by ExtJs. If event is fired manually thus eOpts is never filled or filled customly.
option 2:
If manual event firing is happens in code you can manipulate add a custom argument
As far as I know and my research there is no solution based on scope of selectionchange event. However from a design perspective this is how it should be since selectionchange event should not depend on caller. From what is told I can say that 2 different event is needed. Where different action is taken. (which is the definition of an event :))
Therefore my suggestion is to override select method and fire a custom event in which you do what you want do differently. If needed in rowclick event another custom event can be fired.
You can override this in subclasses or you can use Ext.override for global scope.
You can't, really. The "best" way would be to listen for an itemclick event and check whether the selectionchange event fired within some small threshold amount.
This may not be a Mithril specific question but VM DOM diffing in general. While "redrawing" a page and you attach a new event handler, remove an event handler, or change the event handler associated with an event such as "onclick", it seems that the VM DOM diffing will not detect the change and I have to explicitly force a rerendering of the "real" DOM.
Is there a good pattern to handle these situations.
In Mithril specifically, onclick and all the on-handlers automatically trigger a redraw after the handler function has completed. However, if your onclick handler does real DOM manipulation (3rd party libraries such as jQuery or an animation suite) you need to use the config attribute:
http://lhorie.github.io/mithril/mithril.html#the-config-attribute
which gets called after the page has been rendered.
With regards to changing event handlers, it depends on when in the render cycle you make the change. I'd have to see some code. If it's not too inconvenient, calling redraw manually is not a bad thing. If the redraw strategy is "diff" you won't pay a penalty.
And lastly, if you are introducing your own events, consider using m.startComputation/m.endComputation in your event handlers. These provide much finer grain control and a redraw is automatically called.
http://lhorie.github.io/mithril/mithril.computation.html
I would like to auto suppress click events when the link href is a hash (#). I don't want to have to stop the event with e.preventDefault() within each view.
How can you stop click events application wide for # hrefs?
Interesting question. The backbone routing gets fired before the default behavior, obviously. What you would have to do is insert an event handler that gets fired between the backbone routing and the default behavior, and then e.preventDefault().
I believe that the order of execution of event handlers depends on the order in which they are defined. So play around with that somewhat. You can use the following to inspect the array of event handlers: $(window).data('events'); (I'm assuming you're using jQuery?)
I saw that it adds events to an Observable. However, you would only add it if you would fire it at some point. So, if you add the firing of the event at some line in your code, it was useless to put it into addEvents in the first place and when you don't place the fireEvent in your code then it was pointless to include it in addEvents. What am I missing?
If you are adding custom events with your component then you must add the events with addEvent before you can fire the events with fireEvent. Adding and firing events is useful in binding custom components together without explicitly referencing them.
I read this good article about Routed Events, and I understood why we need sometimes bubble Events and sometime we need tunnel Events.
What I didn't understand is, when we use the tunnel Event, why after it is handled or reached to the source element, still the bubble event is launched?
Thanks in advance!
The article says that if you put an image on a button, and that image is clicked, the tunnel event for that image will fire. But it is highly likely that you would also want to handle that click as if the button itself was clicked, so a bubble event is also fired which bubbles up to the click event on the button itself (because the button owns the image), so that you can treat the image click like a button click, using the usual event handler for the button.
I would also like to add that the event for both (Tunnel and Bubble) are different.
For tunnel, we use PreviewXXX (eg: PreviewMouseDown) and for bubble event we use XXX (eg: MouseDown) event.
By sequence, Tunnel event gets fired first starting from the root of the application and ends at the source. And the Bubble event is triggered.
It makes perfect sense to have both these events.