We Keep Coding

Facebook Tracking Pixel: Can't create a Custom Coversion based on a custom event

In the official FB guide I've read that, apart from standard events, I can also use custom ones. It's perfect, actually, as I'm trying to create a Custom Conversion using a custom event.
In the guide, the following code is presented for a custom event:
// Custom event (can be used for audience building and custom conversions)
fbq('trackCustom', 'MyCustomEvent', {custom_param: 'custom_value'});
Note, that the comment says "and custom conversions".
So, somewhere in my JS, I have a snippet reacting on click:
$('#elem').on('click', function() {
fbq('trackCustom', 'MyEvent');
});
Unfortunately, when I try to create a new Custom Conversion and I use the new, custom event name, the "Next" button is inactive:
Additionally, the only Events I can choose, are the standard ones, and only the ones I actually track (or tracked) on page load:
Is there something I'm doing wrong? Should the custom event be somehow "registered" first before it is available for Custom Conversion?
Otherwise, I don't understand why the documentation tells me I can do something that I can't.
Any insights?

To anyone with the same problem: turns out, the missing factor was time.
After a custom event is triggered once, it will be detected and displayed in the Pixel events list. It will also be available when a Custom Conversion is being created. In my case it took about 30 min until I saw the custom event tracked.
As simple as that. Wish this info was provided clearly, anywhere in the docs.

Triggering Synthetic Event in React App

I'm writing a Chrome extension for Facebook and want to programmatically trigger the submission of the focused comment draft on a post. The default behavior is to submit when the user hits the Enter key, so I'm attempting to trick the Facebook UI into thinking that the user did so.
Facebook uses React and a contenteditable div for comment forms.
Here's a set of things that I've tried:
1) jQuery Event triggering $('<the contenteditable div>').trigger($.Event('keydown', {which: 13}))
I've tried this from both the content-script environment and the actual page environment (via both an injected script that responds to postMessage and the Chrome console)
I've also tried triggering the event on the document, from each context.
Nothing seems to happen.
2) Same thing, but with VanillaJS event triggering. relevant StackOverflow question
also from both environments
Nothing happens
3) At this point I realized that this is React and it uses it's own SyntheticEvents, so I basically copy/pasted the Simulate function from ReactTestUtils that's supposed to help testing by simulating events and ran that within the page's environment (grabbing references to the required objects via Facebook's frontend require function).
Also does not work. The function executes fully and without errors, but there's no response from the application.
I've tried this with mostly keydown events, because that has the most listeners attached to it.
I'm aware of these questions, but they haven't helped my understanding: Force React to fire event through injected JavaScript

It's unclear based on your description whether or not this is an issue, but SyntheticEvent has caused me pain before due to the fact that the object is reused. There's a note in the React docs about this:
If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
If you aren't immediately using the event, or if you are trying to pass it into a new scope, you'll need to persist() it.

What is “jQuery.event.special”?

I am new to jQuery and I have been trying to look up the Bootstrap transition.js (line 50) code and figure out how it works in there. I have stumbled across the following:
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
I have read the documentation, but couldn't really understand much except the following:
bindType: // the event you want to bind with
delegateType: // the event you want to delegate with
After some research I have found the following:
Those are the special attributes for the transition end event that are made available for later use in transition.js.
I am trying to figure out things by reading this article, but all I want to know is: what is $.event.special, what is the use of this line? What is it's common usage?
P.S.: I read this question but it has more external links than the answer itself. Is there a clear canonical Q&A about the most basic use of $.event.special?

WHAT is the use of this line?
I'm assuming you meant the first line of code in your question. It basically defines bsTransitionEnd as an alias for the transition end event (the transition end event may vary from browser to browser - that is what the function transitionEnd() does : determine the proper transition end event for the browser. I've used webkitTransitionEnd here on, but it could be something else depending on the browser)
Why use an alias? It insulates any handlers that Bootstrap attaches using this alias (e.g. $('myBootstrapDialog').on('bsTransitionEnd', Bootstrap's handler) from any $('myBootstrapDialog').off('webkitTransitionEnd') that other code (say, your code or maybe another library) does - so the Bootstrap transition end animations would still work!
Why would you or another library do that? The webkitTransitionEnd is a standard event, so let's say you decide to add a transition end animation to a bootstrap dialog - you'd probably do $('myBootstrapDialog').on('webkitTransitionEnd', your handler) and later on you decide to remove the handler you should be going $('myBootstrapDialog').off('webkitTransitionEnd', your handler), but you miscode it as $('myBootstrapDialog').off('webkitTransitionEnd') - this removes all transition end events :-(.
But since Bootstrap attached it's handlers using 'bsTransitionEnd', the only way you could mess up bootstrap would be to do $('myBootstrapDialog').off('bsTransitionEnd') - not something you would do accidentally :-). So voila! Gone be the bugs where Bootstrap inexplicably stops working because of some small miscoding on your part.
The bindType and delegateType basically state that bsTransitionEnd is an alias for transition events attached directly, and ones that are delegated (bubbles). The handle is basically a filter function - all the triggered events basically go through this before the attached Bootstrap event handlers are called (if at all they are)
what is $.event.special?
I'm sure you'd know most of it already - it's a way to hook into jQuery's event handling mechanism allowing you do large scale magic like do X on every attached click event on the page (imagine doing that one by one, at each and every place you've attached an onclick event), define your own events (with all the bubbly goodness and all which comes with it), hook in and spoof events by modifying the event object, etc.
WHAT is its common usage?
I assume this was rhetorical :-) - you already have a couple of really good examples in the Ben Alman blog post you linked to
(paraphrasing) - let's say you do an AJAX submit and want to disable all clicks on the page (you probably don't want the user clicking on and navigating off to some other page via a menu, or changing a checkbox, etc.) and $.event.special.click should help you (of course it might be just easier / traditional to just overlay a transparent / partially transparent div with a Submitting... animation or something or not doing anything - after all, most users wait around to make sure a submit was successful, at least the normal ones :-))
Another use case is the one you saw in the bootstrap code, but like you mentioned, you usually don't have to go in and use this unless you're writing a library or something that you intend to distribute publicly.

$.event.special
The jQuery special events API is a fairly flexible system by which you can specify bind and unbind hooks as well as default actions for custom events. In using this API, you can create custom events that do more than just execute bound event handlers when triggered--these "special" events can modify the event object passed to event handlers, trigger other entirely different events, or execute complex setup and teardown code when event handlers are bound to or unbound from elements.
The jQuery special event hooks are a set of per-event-name functions and properties that allow code to control the behavior of event processing within jQuery. The mechanism is similar to fixHooks in that the special event information is stored injQuery.event.special.NAME, where NAME is the name of the special event. Event names are case sensitive.
As with fixHooks, the special event hooks design assumes it will be very rare that two unrelated pieces of code want to process the same event name. Special event authors who need to modify events with existing hooks will need to take precautions to avoid introducing unwanted side-effects by clobbering those hooks
bindType: // the event you want to bind with
delegateType: // the event you want to delegate with
When defined bindType: String, delegateType: String, these string properties specify that a special event should be handled like another event type until the event is delivered. The bindType is used if the event is attached directly, and the delegateType is used for delegated events. These types are generally DOM event types, and should not be a special event themselves.

How to know what JavaScript functions are bound to an HTML element?

I want to know what JavaScript function is allocated to the events of an HTML element, an input, for example. I would like to check if it has any function bound to the onmouseover, or onclick, or any other event.

In plain JavaScript, that information is not accessible.
So, your options:
Some frameworks like you track event listeners provided you used their syntax to bind them (like jQuery).
Some libraries will "rewrite" how event tracking works (like VisualEvent)
Lastly, you can write your own wrapper around the add/removeEventListener functions, so that it tracks that information in addition to calling the native add/removeEventListener functions. Making sure it wraps all the possible ones, though, can be a challenge.

Inspect your input box in Google Chrome browser, you can check the Event Listeners tab. You can also make use of timeline to track the firing events and effectively use DOM break points.

How does JQuery create it's Custom Events and can I recreate in Javascript?

I am looking to create events in Javascript using the same methodology as JQuery- Does anyone know how JQuery does it?
My reasoning is that using raw Javascript such this:
var myEvent = new CustomEvent("userLogin", eventProperties);
...does not actually work on Android native browser, as it does not support DOM Level 3 like Chrome and other browsers do.
However, JQuery does work on Android's stock browser, and simply uses:
$.event.trigger('MyEvent');
My question is, what is the code behind this? I tried to find it by going through JQuery's source code, but cannot get my head around it!

The fundamental thing here is this: When you hook an event handler up with jQuery, jQuery doesn't directly add that handler to the DOM element. Instead, jQuery hooks up a handler of its own on the DOM element (if it doesn't already have one on it). When the event occurs, jQuery looks at the list of jQuery-registered handlers for the event and fires them in order. (There are several reasons for this; initially it was primarily around IE memory leaks and the fact that IE fired handlers in one order, and everyone else in a different order; so jQuery took over and ensured the order.)
(You might be able to see where I'm going with this...)
So when you use trigger, jQuery sends the synthetic event to the DOM element, but it doesn't rely on that synthetic event to work; it calls the handlers you've registered through jQuery directly. In fact, it sets a flag so that it knows that it's done that, so if the browser does send the event to jQuery's handler for it, jQuery knows to ignore it (since it's already done its work).
You can see this in all its glory starting with line 4,464 of the current uncompressed jQuery file.
So basically jQuery's build its own pub/sub system, and only uses the browser event system as an input to it. So custom events don't usually have to talk to the browser at all.