jQuery .triggerと.onとで実行される関数へのデータの渡し方の違いメモ。

オブジェクトのイベントを呼出して、オブジェクト自身をイベント内で使いたい時とかのメモ

.trigger

.trigger( eventType [, extraParameters ] )

extraParameters
Type: Array or PlainObject
Additional parameters to pass along to the event handler.
.trigger() | jQuery API Documentation

呼び出されるイベントの第二引数以降でデータを受取ることができる。

ex

配列で渡す場合

var $d = $(document);

$d.on('trigger_event', function(evt, param1, param2) {
  console.log( param1, param2 ); // => 'foo', 'bar'
});

// 発火
$d.trigger('trigger_event', ['foo', 'bar']);

オブジェクトで渡す場合

var $d = $(document);

$d.on('trigger_event', function(evt, data) {
  console.log( data.flg ); // => true
});

// 発火
$d.trigger('trigger_event', {flg: true});

.on

.on( events [, selector ] [, data ], handler )

data
Type: Anything
Data to be passed to the handler in event.data when an event is triggered.
.on() | jQuery API Documentation

呼び出されるイベントでは event.data で受取ることができる。

ex

var myObj = {
  dispatchEventListener: function(evt) {
     console.log( evt.data.self); // => myObj
  }
};

var $d = $(document);
$d.on('dispatch_event', {self: myObj}, myObj.dispatchEventListener);

// 発火
$d.trigger('dispatch_event');

.trigger と .on 両方からデータを渡す

データの渡し方が異なるので両方からデータを渡せば、オブジェクトの外からオブジェクトの中の関数に値を渡せたりします。

var MyObj = function() {
  var self = this;
  $(document).on('dispatch_event', {self: self}, self.dispatchEventListener);
  return this;
}

MyObj.prototype.dispatchEventListener = function(evt, data) {
  console.log( evt.data.self); // => [MyObj]
  console.log( data.flg ); // => true
};

var myObj = new MyObj();

// 発火
$(document).trigger( 'dispatch_event', {flg: true} );

わーい！

初めてプログラミングを書きはじめたのがAS(ActionScript)だったので、そこでなんとなく覚えた EventDispatcher 的な書き方に影響されている気がします。EventDispatcher と EventListener の定義の違いの理解があやふやですが…

久しぶりにコーディングのお仕事でjQuery触ったら、やっぱりすごく忘れてて予想外に時間がかかってしまった。。。orz
どうせまた忘れるだろうからメモをしました。やはり日々の触れてるって継続が大切でなのすね…

---

[参考]

• .on() | jQuery API Documentation
• jQuery#onを便利に使う - Qiita
• .trigger() | jQuery API Documentation
• .trigger() | jQuery 1.9 日本語リファレンス | js STUDIO

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。
ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。
そこで、ContactForm7で用意されているtriggerのイベントを利用して、フォーム送信後に送信確認のチェックを外して送信ボタンをdisabledに戻すようにしてみました。

triggerを利用するので、サイトで使ってあるテーマのjsファイルなどに記述すればOKです。
利用するイベントについては、WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。 - かもメモ を参照ください。

$(function() {
  var $form = $('.wpcf7-form');

  var onRresetAcceptance = function(evt) {
    var $form = evt.data.form,
        $submit = $form.find('input:submit');

    if( !$submit.length ) {
      return;
    }

    $form.find('input:checkbox.wpcf7-acceptance').each(function(i, elm) {
      var $acceptance = $(elm),
          is_invert = $acceptance.hasClass('wpcf7-invert'),
          is_checked = $acceptance.prop('checked');
      if( (is_invert && !is_checked)
       || (!is_invert && is_checked) ) {
          $acceptance.prop('checked', !is_checked).trigger('change');
          $submit.prop('disabled', true);
       }
    });
  };

  if( $form.length ) {
    $(document).on('wpcf7:submit', {form: $form}, onRresetAcceptance);
  }
});

フォーム送信時になぜか、submit.wpcf7が二回呼ばれてしまっているのですが、この様な感じでフォーム送信時に送信確認をリセットして送信ボタンをdisabledにする事ができました。

---

[参考]

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)

WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。

管理画面から

WordPressの管理画面 > コンタクトフォームの編集画面 > その他の設定
を選択して、記入エリアにon_sent_ok:(送信完了時)、on_submit:(送信された時常に) のキーワードに続けて実行したいjavascriptのコードをテキスト形式で記述する。

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

恐らく最も簡単な方法です。google Analyticsのコードを追加したりはこれで十分だと思います。
しかし、複雑なコードを書いたり、自前のスクリプトで即時関数の中にあるオブジェクトなどを触ろうとすると少し大変です。

設定されているdispatcherを利用する

ContactForm7がサイト上で実行しているjsファイルを見ていると次のようなdispatcherが設定されていました。

// contact-form-7/includes/js/scripts.js
//   wpcf7.triggerEvent
$(data.into).trigger('wpcf7:invalid');
$(data.into).trigger('wpcf7:spam');
$(data.into).trigger('wpcf7:mailsent');
$(data.into).trigger('wpcf7:mailfailed');
$(data.into).trigger('wpcf7:submit');

管理画面から設定できる on_sent_ok、on_submit はそれぞれ mailsent.wpcf7、submit.wpcf7 でイベントの発火を受け取ることができそうです。
それ以外にもエラーになった時やメール送信失敗時のevent dispacherも用意されています。

on_submit (送信された時常に) 実行したい場合は次のようにdocumentにイベントを付けておけばOKです。

$(document).on('wpcf7:submit', function(evt) {
  alert('submit');
});

このdeprecatedさえれるイベントを利用すれば、独自に書いているjsの中でも比較的自由にContactForm7のイベント実行時に合わせて独自の処理を加える事ができそうです。

---

[参考]

• その他の設定 | Contact Form 7 [日本語]
• 意外と知らない !? お問い合わせフォーム「Contact Form 7」をもっと便利に使いこなすための3つのポイント | 無料WordPressテーマ BizVektor [ ビズベクトル ]
• wordpress - Contact Form 7 - add custom function on email send - Stack Overflow

小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!