https://developer.mozilla.org/en/DOM/document.createEvent
https://developer.mozilla.org/en-US/docs/Web/API/event.initKeyEvent?redirectlocale=en-US&redirectslug=DOM%2Fevent.initKeyEventevent.initKeyEvent (type, bubbles, cancelable, viewArg, ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, keyCodeArg, charCodeArg)
element.dispatchEvent
https://developer.mozilla.org/en/DOM/element.dispatchEvent
view source
JavaScript
// for safari/Chrome
/* * document.createEvent("TextEvent")
* void initTextEvent(in DOMString typeArg,
* in boolean canBubbleArg,
* in boolean cancelableArg,
* in views::AbstractView viewArg,
* in DOMString dataArg,
* in unsigned long inputMode);
*/
var DOM_INPUT_METHOD_SCRIPT = 0x09;
var copyProperties=function(/* object */ from, /* object */ to){
try{
if (to) {
for (var p in from) {
if (p in to)from[p] = to[p];
}
}
}catch(e){
return from;
}
};
var textinput=(function(){
try {
var event = document.createEvent("TextEvent");
if (event.initTextEvent) {
return function(data, option){
var event = document.createEvent("TextEvent");
var e = {
canBubble: true,
cancelable: false,
view: window,
data: "",
inputMode: DOM_INPUT_METHOD_SCRIPT
};
e = copyProperties(e, option);
event.initTextEvent('textInput', e.canBubble, e.cancelable, e.view, data, e.inputMode);
return event;
};
}else{
return false;
}
}catch(ex){
;
}
return false;
})();
$(function(){
$('#area').focus();
var e = textinput('A');
$('#area')[0].dispatchEvent(e);
$('button').on('click', function(){
var t = $(this).text();
console.log(t);
t++;
$(this).text(t);
});
$('button').on('keypress', function(){
$(this).text(0);
});
$('#area').on('focus', function(){
dispatchMouseEvent($('button')[0], 'click');
});
$('#area').on('click', function(){
/*
var ev = document.createEvent("KeyboardEvent");
var keyIdentifier = 'A';
var e = {
canBubble: true,
cancelable: false,
view: window,
keyLocation: 0x00,
modifiersList: "A",
repeat: false
};
ev.initKeyboardEvent('keypress', e.canBubble, e.cancelable, e.view, keyIdentifier, e.location, "", e.repeat);
$(this)[0].dispatchEvent(ev);
console.log(ev);
*/
});
$('#area').on('keypress', function(){
$('button').text(0);
});
var dispatchMouseEvent = function(ele, event_name, key_code){
if(!ele){return;}
var ev = document.createEvent("MouseEvents");
ev.initEvent(event_name, true, true);
if(key_code > 0){
ev.keyCode = key_code;
}
ele.dispatchEvent(ev);
}
var dispatchKeyEvent = function(ele, event_name, key_code){
if(!ele){return;}
/*
var evt = document.createEvent("UIEvent");
evt.initEvent("keypress", true, true);
ele.dispatchEvent(evt);
*/
/*
var ev = document.createEvent("Events");
ev.initEvent("keypress", true, true, null, false, false, false, false, 65, 0);
*/
/*
ev.initEvent(event_name, true, true);
ev.view = window;
ev.altKey = false;
ev.ctrlKey = false;
ev.shiftKey = false;
ev.metaKey = false;
ev.keyCode = 46;
ev.charCode = 'a';
console.log(ev);
*/
ele.dispatchEvent(ev);
}
});
CSS
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-event-dispatch/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。