イベントをトリガーする

一部の要素は、イベントをトリガーするための特定のメソッドを提供します。

たとえば、任意の要素で click イベントをトリガーするには、click() メソッドを使用します。

el.click();Code language: CSS (css)

入力テキストとテキストエリア要素は、focus イベントと blur イベントをトリガーするための focus() メソッドと blur() メソッドを提供します。

el.focus();
el.blur();Code language: CSS (css)

フォーム 要素には、submit イベントと reset イベントをトリガーするための submit() メソッドと reset() メソッドがあります。

const frm = document.querySelector('form');
// trigger the submit event
frm.submit();

// trigger the reset event
frm.reset();
Code language: JavaScript (javascript)

mousedown や change などの他のイベントをトリガーするには、次の triggerEvent() ヘルパー関数を使用します。

function triggerEvent(el, type) {
    // IE9+ and other modern browsers
    if ('createEvent' in document) {
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        // IE8
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on' + e.eventType, e);
    }
}Code language: JavaScript (javascript)

入力テキストがあるとします。

<input type="text" name="username">Code language: HTML, XML (xml)

以下は、click イベントにイベントハンドラーをバインドします。

const input = document.querySelector('input[type="text"]');
input.addEventListener('change', (e) => {
    console.log('Input changed');
});Code language: JavaScript (javascript)

change イベントをトリガーするには、次のように triggerEvent() 関数を使用します。

triggerEvent(input, 'change');Code language: JavaScript (javascript)