Myujth

MY QUESTION

If the jQuery custom event is namespaced with a colon like 'wpcf7:mailsent' or 'wpcf7:submit', why or how does the DOM event NAME become wpcf7mailsent or wpcf7submit? Are they joined somehow by some DOM process?

MORE CONTEXT

Wordpress's Contact Form 7 provides several types of custom DOM events. When I look at the plugin's source code, I'm trying to understand how these names are created in the DOM and where they're coming from.

List of Contact Form 7 Custom DOM Events

• 
  wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.


• 
  wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.


• 
  wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.


• 
  wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.


• 
  wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.

Source: wp-plugins/contact-form-7 Github repo

The code that processes the form data (I think):

$.fn.wpcf7InitForm = function() {
 this.ajaxForm(
 beforeSubmit: function(arr, $form, options) 
 $form.wpcf7ClearResponseOutput();
 $form.find('[aria-invalid]').attr('aria-invalid', 'false');
 $form.find('img.ajax-loader').css( visibility: 'visible' );
 return true;
 ,
 beforeSerialize: function($form, options) 
 $form.find('[placeholder].placeheld').each(function(i, n) 
 $(n).val('');
 );
 return true;
 ,
 data: '_wpcf7_is_ajax_call': 1 ,
 dataType: 'json',
 success: $.wpcf7AjaxSuccess,
 error: function(xhr, status, error, $form) 
 var e = $('<div class="ajax-error"></div>').text(error.message);
 $form.after(e);
 
 );

I noticed the part:

success: $.wpcf7AjaxSuccess,

Inside the $.wpcf7AjaxSuccess = function(data, status, xhr, $form) ... ... part was these codes:

$(data.into).trigger('wpcf7:mailsent');
$(data.into).trigger('mailsent.wpcf7'); // deprecated

and

$(data.into).trigger('wpcf7:submit');
$(data.into).trigger('submit.wpcf7'); // deprecated