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.
Related
I want to perform an action each time a blur event happens on a form group bound control in angular.
I've seen the onBlur validation and it is an option. But I don't want to restrict the form control update events to be blurs. People may leave the cursor in the input and submit the form with a key control.
Something like an event observable where I would get a stream of the events the form group is using to perform its internal controls. Filter on the type (if 'blur') and call my function would be ideal.
Is there anything like this?
Also I don't want to use blur bindings from the DOM elements directly in the template. It would be so much extra work to make and maintain.
Basically in vanilla JavaScript you can register event-listeners to that target element via addEventListener():
var formInputElement = document.getElementById("myForm");
formInputElement.addEventListener("focus", myFocusFunction);
formInputElement.addEventListener("blur", myBlurFunction):
formInputElement.addEventListener("focusin", myFocusFunction);
formInputElement.addEventListener("focusout", myBlurFunction);
These will call your functions passed in as listener (callback function) for the event-type (e.g. myBlurFunction for an event-type identified by blur).
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.
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 know this is the proper way to do -
Attach handlers on react components using attributes such as onClick, onBlur etc.
If attaching custom events then attach them in componentDidMount so that it always gets attached on every rendering.
https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation
However, what happens when an event is attached to a DOM element using jquery ? Why am I not able to listen to those events ? I am attaching them out side componentDidMount. However the event handler should get trigerred the first time atleast ?
I was debugging some react code which was attaching an handler to it directly, but it was not trigerring the handler at all. Why was that ?
Without code example it's difficult to know for sure but more than likely you're trying to bind an event using jQuery to some react-generate DOM element. So depending where you do the bind, you're probably using a jQuery selector which returns no results because React hasn't rendered that element to the DOM at the time the selector is being run.
This is why, if you are going to use jQuery binding, you should make sure you do so as part of the component lifecycle that ensures the element is actually rendered to the DOM before you are trying to select it with jQuery. So that's why the recommendation is to put this kind of code inside componentDidMount and clean it up in componentWillUnmount.
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?)