フォームのinvalidイベントをまとめて拾うには

###前提・実現したいこと
後から追加したものも含めて、フォーム要素から発生するinvalidイベントをまとめて拾いたいのですが、（動的に追加するごとにイベントを割り当てるなどして）全要素にイベントを仕掛ける以外の対処法はあるのでしょうか。

###発生している問題・エラーメッセージ
普通のイベントならバブリングするので、.on()で上位要素に仕掛ければ問題なく取得できるのですが、invalidイベントはバブリングしないということで、そういうわけにも行きません。

また、HTML5の勧告には、

When a form is submitted, invalid events are fired at each form control that is invalid, and then at the form element itself. （強調は引用者）

と書いてあるのですが、実際にブラウザで動かしてみたところ、form要素でもinvalidイベントは発生しませんでした。

###該当のソースコード

javascript
1$(function(){
2  'use strict';
3  $('form').on('invalid', function(e){
4    // 仕様と違って、このコールバックが実行されることはない
5    console.log(e);
6  });
7
8  $('body').on('invalid', 'input,select,textarea', function(e){
9    // バブリングしないのでbodyまで届かない
10    console.log(e);
11  });
12});

###試したこと
inputエレメントについてinvalidイベントが起きることは確認しました。

別な手法について

invalidイベントにこだわらず、submit関連のイベントで:invalidなエレメントを抽出する、という形でも対応可能かもしれませんが、サブミットとは別個でcheckValidity()を実行する場面などとの絡みもあって、できればinvalidイベントで動かしたいと考えています。

###補足情報(言語/FW/ツール等のバージョンなど)
ブラウザ環境（Windows 7 x64上）

Google Chrome 53.0.2785.143 m (64-bit)
Mozilla Firefox 48.0.2

ライブラリ

jQuery 2.2.1

行動規範の内容に同意します

回答1件

ベストアンサー

未検証ですが、バブリングしないイベントもキャプチャリングフェーズなら拾える仕様と記憶しています。
ですので、addEventListener の第三引数で true を指定することでご希望の動作になると思います。
なお、jQueryにはキャプチャリングフェーズの概念がない為、jQuery APIでキャプチャリングフェーズを実装する事は出来ません。

Re: maisumakun さん

投稿2016/10/08 03:22