ブラウザ毎に非テキスト入力なinput要素のイベントハンドラの挙動について調べてみた

onBlurでバリデーションの発火させたいときってありますよね？
ブラウザ毎に非テキスト入力なinput要素のイベントハンドラの挙動について調べてみました。
ブラウザ対応で沼の気配を感じて調査したときの記録です。

環境

HTMLの要素

ブラウザ	バーション	OS
Google Chrome	111.0.5563.147 (Official Build) （64 ビット）	Windows
Firefox	111.0.1	Windows
Macintosh Safari	バージョン16.3 (18614.4.6.1.6)	MacOS Ventura 13.2.1
iPadOS Safari		iPadOS 16.4 20E246
Android Chrome	111.0.5563.116	Pixel 6a Android 13

やりかた

適当なStorybookを作ってそこで実験しました

export const Test = () => {
	const onBlurHandler = () => {
		alert('onBlur');
	};

	const onChangeHandler = () => {
		alert('onChange');
	};

	return (
		<>
			<fieldset>
				<label>
					<input
						type="radio"
						name="radio"
						value="foo"
						onBlur={onBlurHandler}
						onChange={onChangeHandler}
					/>
        foo
				</label>
				<br />
				<label>
					<input
						type="radio"
						name="radio"
						value="bar"
						onBlur={onBlurHandler}
						onChange={onChangeHandler}
					/>
        bar
				</label>
				<br />
				<label>
					<input
						type="radio"
						name="radio"
						value="baz"
						onBlur={onBlurHandler}
						onChange={onChangeHandler}
					/>
        baz
				</label>
			</fieldset>
			<label>
				<input
					type="checkbox"
					name="checkbox"
					value="hoge"
					onBlur={onBlurHandler}
					onChange={onChangeHandler}
				/>
        hoge
			</label>
		</>
	);
};

調査

Radio

ブラウザ名	onBlur	onChange
Google Chrome	動作する	動作する
Firefox	動作する	動作する
Mac safari	動作しない	動作する
iPad safari	動作しない	動作する
Android Chrome	動作する	動作する

Checkbox

ブラウザ名	onBlur	onChange
Google Chrome	動作する	動作する
Firefox	動作する	動作する
Mac safari	動作しない	動作する
iPad safari	動作しない	動作する
Android Chrome	動作する	動作する