document.createEvent()は、「eventType」に指定したイベントタイプのイベントを作るメソッド。
構文
var $eventObject = document.createEvent( eventType )
引数
- eventType
- 作りたいイベントタイプを指定する。
- 例：「HTMLEvents」「MouseEvents」「UIEvents」「MutationEvents」。
戻り値
イベントオブジェクト。
event.initEvent()メソッドなどで初期化する必要がある。
サンプル
サンプルの動作について
- 「選択／解除」ボタンをクリックすると、「チェックボックス」を選択する。
- 「選択／解除」ボタンを再度クリックすると、「チェックボックス」の選択を解除する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleButton" ).onclick = function(){
var $eventObject = document.createEvent( "MouseEvents" );
$eventObject.initEvent( "click", false, false );
var $elementReference = document.getElementById( "sampleCheckbox" );
$elementReference.dispatchEvent( $eventObject );
};
}
</script>
window.onload = function () {
document.getElementById( "sampleButton" ).onclick = function(){
var $eventObject = document.createEvent( "MouseEvents" );
$eventObject.initEvent( "click", false, false );
var $elementReference = document.getElementById( "sampleCheckbox" );
$elementReference.dispatchEvent( $eventObject );
};
}
</script>
HTML
<p>
<input type="checkbox" id="sampleCheckbox" /><label for="sampleCheckbox">チェックボックス</label>
<br />
<button id="sampleButton">選択／解除</button>
</p>
<input type="checkbox" id="sampleCheckbox" /><label for="sampleCheckbox">チェックボックス</label>
<br />
<button id="sampleButton">選択／解除</button>
</p>