JavaScriptでイベントをトリガーする方法は?


523

を使用してイベントをテキストボックスに添付しましたaddEventListener。正常に動作します。別の関数からプログラムでイベントをトリガーするときに、問題が発生しました。

どうすればできますか?


11
Mozillaには、JavaScriptでのイベントの作成とトリガーを説明する素晴らしい記事があります。それが役に立てば幸い!
Ricky Stam 2013年

1
これに対する承認済みの回答を変更してください。これは最新の情報です。
のMichałPerłakowski

回答:


454

IE 8以下ではfireEventを使用でき、他のほとんどのブラウザーではW3CのdispatchEventを使用できます。起動するイベントを作成するには、ブラウザに応じて、またはブラウザに応じて使用できます。createEventcreateEventObject

以下は、(プロトタイプからの)自明のコードで、でイベントを発生dataavailableさせelementます。

var event; // The custom event that will be created
if(document.createEvent){
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
    event.eventName = "dataavailable";
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventName = "dataavailable";
    event.eventType = "dataavailable";
    element.fireEvent("on" + event.eventType, event);
}

6
IEバージョンのみの前に「オン」があることを忘れないでください(私は最初にそれを逃しました)
hugomg

45
eventNameここで変数には何が含まれていますか?
NeDark、2011

1
はい、dataavailableはeventNameにあり、メモも定義する必要があります({}に定義しても問題ありません)。
Charles

4
Internet Explorer 9以降はcreateEventとdispatchEventを処理するため、これらのifステートメントは必要ありません。
ブレイク

5
この例はうまくいき
Dorian

334

実際の例:

// Add an event listener
document.addEventListener("name-of-event", function(e) {
  console.log(e.detail); // Prints "Example of an event"
});

// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

古いブラウザのポリフィルとより複雑な例については、MDN docsを参照してください。

EventTarget.dispatchEventおよびのサポートテーブルを参照してくださいCustomEvent


11
この答えは今より現実的です。追加すべきことの1つ:型指定されたイベント(TransitionEventClipboardEventなど)が必要な場合は、適切なコンストラクターを呼び出すことができます。
キリル14

6
@AngelPolitis:以前の質問が既に受け入れられた後に書かれたものであり、質問を書いた人(@KoolKabin)がおそらく回答を読み直さなかったため
Dorian

4
2010年に依頼されたため
DarkNeuron 2017

IEのどのバージョンでも動作しません(caniuse.com/#feat=customevent)。修正については私の答えを参照してください。
Yarin、2018年

将来の読者へのメモdetailは、のプロパティであるEventため、反対側でアクセスしたいデータをそれに割り当て、によってアクセスしevent.detailます。+1
ダカ

71

jQueryを使用したくない場合、特に下位互換性を気にしない場合は、次のように使用します。

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

こちらこちらのドキュメントをご覧ください

編集:設定によっては、追加したい場合がありますbubbles: true

let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));

4
initEvent()のような非推奨のメソッドを使用しないため、これは受け入れられる答えになるはずです
user2912903

2
素晴らしい解決策ですが、これはIE11では機能しないことに注意してください。次にCustomEvent、対応するポリフィルを使用する必要があります。
Fabian von Ellerts

2
選択した回答より優れている
WitnessTruth

42

jQueryを使用すれば、簡単に実行できます

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

とそれを扱う

$('#yourElement').on('customEventName',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

「[arg0、arg1、...、argN]」は、これらの引数がオプションであることを意味します。


4
正しい構文は$( '#yourElement')。trigger( 'customEventName'、[arg0、arg1、...、argN]);です。2番目のパラメータの[]を忘れました
ハリー

25

IE9 +をサポートしている場合は、以下を使用できます。同じ概念がjQueryを必要としない場合にも組み込まれています

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function() {
      handler.call(el);
    });
  }
}

function triggerEvent(el, eventName, options) {
  var event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, options);
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(eventName, true, true, options);
  }
  el.dispatchEvent(event);
}

// Add an event listener.
addEventListener(document, 'customChangeEvent', function(e) {
  document.body.innerHTML = e.detail;
});

// Trigger the event.
triggerEvent(document, 'customChangeEvent', {
  detail: 'Display on trigger...'
});


すでにjQueryを使用している場合は、上記のコードのjQueryバージョンです。

$(function() {
  // Add an event listener.
  $(document).on('customChangeEvent', function(e, opts) {
    $('body').html(opts.detail);
  });

  // Trigger the event.
  $(document).trigger('customChangeEvent', {
    detail: 'Display on trigger...'
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


これはIEのどのバージョンでもwindow.CustomEvent存在しますが、機能しませんが、コンストラクターとして呼び出すことはできません:caniuse.com/#search=CustomEvent ;)
SidOfc

13

JavaScriptを使用して、マウスオーバーでのクリック、マウスダウン、マウスアップイベントの発生を検索しました。フアンメンデスの回答を見つけました。答えはここをクリックしてください

ここをクリックするとライブデモが表示され、以下はコードです。

function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9) {
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

    if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
        case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
        case "mousedown":
        case "mouseup":
            eventClass = "MouseEvents";
            break;

        case "focus":
        case "change":
        case "blur":
        case "select":
            eventClass = "HTMLEvents";
            break;

        default:
            throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
            break;
        }
        var event = doc.createEvent(eventClass);

        var bubbles = eventName == "change" ? false : true;
        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else if (node.fireEvent) {
        // IE-old school style
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

8

リスナーイベントを手動で呼び出す必要がない代替案を提案するだけです。

イベントリスナーが行うことは何でも、それを関数に移動し、イベントリスナーからその関数を呼び出します。

次に、イベントが発生したときにイベントが行うのと同じことを実行するために必要な他の場所にその関数を呼び出すこともできます。

これは「コード集約型」ではなく、読みやすいと思います。


1
コンテキストに応じて、同じイベント(または、ケースではコールバック関数)に対して複数の異なることを実行したい場合はどうなりますか?:)これは良い代替案ですが、OPはコールバックを使用するのではなく、プログラムでイベントをトリガーする方法を知りたいので、これは答えよりもコメントのように感じます:)
SidOfc

これは答えではなくコメントであるべきだというのはあなたの言うとおりです。どうして?ええと、ええと、それは実際に尋ねられた質問には答えません。よかった。あなた自身の質問については、これはJavaScriptのコンストラクターにとって素晴らしい機会になると思います!;-)しかし、それらがなければ、関数呼び出しで引数を送信し、それを使用して関数が何をすべきかを判断できると思います。
カービーL.ウォレス

5

私は次のものを使用しました(はるかに単純であるようです):

element.blur();
element.focus();

この場合、ユーザーが実行した通常のフォーカス軌跡の喪失によってトリガーされるのと同じように、値が実際に変更された場合にのみ、イベントがトリガーされます。


1
これは、どのようなイベントであるかを考慮していません。ぼかしと焦点を合わせると、イベントがトリガーされる場合がありますが、そうでない場合もあります。これはバグを招いています。
Mardok、2016年

1
これはにも適用されelement.click()ます。
AxeEffect 2017年

これにより、Androidの私のAngular / Cordovaアプリの奇妙な問題が修正されました。ほんとありがと。
DarkNeuron 2017

5

IEで動作するように@Dorianの回答を変更しました。

document.addEventListener("my_event", function(e) {
  console.log(e.detail);
});

var detail = 'Event fired';

try {

    // For modern browsers except IE:
    var event = new CustomEvent('my_event', {detail:detail});

} catch(err) {

  // If IE 11 (or 10 or 9...?) do it this way:

    // Create the event.
    var event = document.createEvent('Event');
    // Define that the event name is 'build'.
    event.initEvent('my_event', true, true);
    event.detail = detail;

}

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

FIDDLE: https : //jsfiddle.net/z6zom9d0/1/

こちらもご覧くださいhttps :
//caniuse.com/#feat=customevent


4

受け入れられた答えは私にはうまくいきませんでした、createEventの答えはどれもうまくいきませんでした。

最後に私のために働いたのは:

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

これがスニペットです:

const clickBtn = document.querySelector('.clickme');
const viaBtn = document.querySelector('.viame');

viaBtn.addEventListener('click', function(event) {
    clickBtn.dispatchEvent(
        new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

clickBtn.addEventListener('click', function(event) {
    console.warn(`I was accessed via the other button! A ${event.type} occurred!`);
});
<button class="clickme">Click me</button>

<button class="viame">Via me</button>

読書から:https : //developer.mozilla.org/en-US/docs/Web/API/MouseEvent


3
function fireMouseEvent(obj, evtName) {
    if (obj.dispatchEvent) {
        //var event = new Event(evtName);
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(evtName, true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
        obj.dispatchEvent(event);
    } else if (obj.fireEvent) {
        event = document.createEventObject();
        event.button = 1;
        obj.fireEvent("on" + evtName, event);
        obj.fireEvent(evtName);
    } else {
        obj[evtName]();
    }
}

var obj = document.getElementById("......");
fireMouseEvent(obj, "click");

1
これは非推奨です。ポリフィルにのみ役立ちます。developer.mozilla.org/en-US/docs/Web/API/MouseEvent/...
hipkiss

1

一緒にコンパイルしたこの関数を使用できます。

if (!Element.prototype.trigger)
  {
    Element.prototype.trigger = function(event)
    {
        var ev;

        try
        {
            if (this.dispatchEvent && CustomEvent)
            {
                ev = new CustomEvent(event, {detail : event + ' fired!'});
                this.dispatchEvent(ev);
            }
            else
            {
                throw "CustomEvent Not supported";
            }
        }
        catch(e)
        {
            if (document.createEvent)
            {
                ev = document.createEvent('HTMLEvents');
                ev.initEvent(event, true, true);

                this.dispatchEvent(event);
            }
            else
            {
                ev = document.createEventObject();
                ev.eventType = event;
                this.fireEvent('on'+event.eventType, event);
            }
        }
    }
  }

以下のイベントをトリガーします。

var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');

イベントを見る:

dest.addEventListener('focus', function(e){
   console.log(e);
});

お役に立てれば!


1

以下のコードを使用して、Elementメソッドを使用してイベントを起動できます。

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}


0

最も効率的な方法は、addEventListener直接登録されているものとまったく同じ関数を呼び出すことです。

CustomEventおよびcoを使用して偽のイベントをトリガーすることもできます。

最後に<input type="file">.click()メソッドなどのいくつかの要素がサポートされます。


0
var btn = document.getElementById('btn-test');
var event = new Event(null);

event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);

これにより、「beforeinstallprompt」のイベントが即座にトリガーされます


-2

jqueryイベント呼び出しを使用します。要素のonChangeをトリガーする場所に以下の行を記述します。

$("#element_id").change();

element_idは、onChangeをトリガーする要素のIDです。

の使用を避けます

 element.fireEvent("onchange");

サポートが非常に少ないためです。サポートについては、このドキュメントを参照してください。


-2

HTML

<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>

JS

// click event listener of the link element --------------  
document.getElementById('myLink').addEventListener("click", callLink);
function callLink(e) {
    // code to fire
}

// function invoked by the button element ----------------
function fireLink(event) {                   
    document.getElementById('myLink').click();      // script calls the "click" event of the link element 
}

-9

あなたが望むのはこのようなものです:

document.getElementByClassName("example").click();

jQueryを使用すると、次のようになります。

$(".example").trigger("click");

トリガーメソッドは間違っていませんが、jqueryメソッドです
KamuranSönecek'29 / 12/15

2
1. document.getElementByClassName存在しません。2. document.getElementsByClassName存在しますが、リストを返します。3.これは一部のネイティブイベントでのみ機能します。4.最後の例は、基になるネイティブイベントが存在しない場合にjQueryイベントをトリガーします。
Glenn Jorde
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.