関数への引数として（jQueryオブジェクトとして）要素を渡します。

Question

私はマウスクリック要素に関数を作成しようとしています。

今この質問の範囲外の$(element).click()を考えることができます、私はそれをこのように作成したい：

function mouseClick() { 
    var event = new MouseEvent('click', { 
     'view': window, 
     'bubbles': true, 
     'cancelable': true 
    }); 

    var element = document.getElementById('elementId'); 
    element.dispatchEvent(event); 
} 

mouseClick(); 

問題がある：

私はこの関数の引数としての要素を渡すしようとすると、 （jQueryオブジェクトとして）、私はそれを呼び出すとき：

function mouseClick(element) { 
    var event = new MouseEvent('click', { 
     'view': window, 
     'bubbles': true, 
     'cancelable': true 
    }); 

    //var element = document.getElementById('elementId'); <==== I want to remove this to replace it with the arguments when I call it; 
    element.dispatchEvent(event); 
} 

var element = $('#elementId'); 
mouseClick(element); 

私はコンソールエラーを取得します：

Uncaught TypeError: element.dispatchEvent is not a function

しかし、私はそれが動作getElementByIdを使用して要素を選択した場合：

var element = $('#elementId'); //<==== this doesn't work; 
var element = document.getElementById('elementId'); //<==== this works; 
mouseClick(element); 

ですが、なぜでしょうか？

jQueryセレクタを動作させるにはどうすればよいですか？

基本的には、IDセレクタ以外の要素をより高度な方法で選択したいので、jQueryは便利で使いやすいと思います。

Answer 1

jQueryオブジェクトはDOM要素と同じではなく、一般的に同じメソッドを呼び出すことはできません（同じ名前のメソッドが同じ場合があります）。たとえば、フォームの場合はsubmit()です。 dispatchEvent()はjQueryメソッドではなくDOMメソッドであるため、jQueryオブジェクトで呼び出すことはできません。

あなたが行うことができますので、あなたは、get()メソッドを使用してjQueryオブジェクトからDOM要素を取得することができます：

mouseClick(element.get(0)); 

あなたはまた、ショートカットとして添字を使用することができます。

mouseClick(element[0]); 

Answer 2

結果jqueryセレクタがDOM要素ではないため、displayEventを使用することはできません。

あなたのjqueryセレクタ内のすべての要素の上に移動して、それらの一つ一つに派遣にイベントを適用することができます。

Object.keys(element).forEach(function(key) { 
    element[key].dispatchEvent(event); 
});