Jqueryトリガは、一度にaddEventListenerで指定された1つのイベントに対してのみ動作します

Question

JavaScriptの知識を向上させるために、Jqueryに依存せずにライブラリを構築しています。しかし、私はいくつかのJqueryメソッドを使用してライブラリのためのテストを書く。

Jqueryの.triggerメソッドを使用してネイティブEventTarget.addEventListenerメソッドを使用して追加したイベントリスナーをトリガーするテストがあります。

var elem = document.getElementById('square'); 
elem.addEventListener('click', function() { 
    alert('click'); 
}); 
elem.addEventListener('mouseover', function() { 
    alert('mouseover'); 
}); 
$(elem).trigger('click'); 
$(elem).trigger('mouseover'); 

同じ要素で2つの異なるイベントをトリガーすると、1つのハンドラーだけが起動します。

これは、このJSFiddle

で観察することができますこの問題が発生し、それを修正する方法をなぜ誰かが説明できますか？

Answer 1

addEventListenerを使用している場合、jQueryのtriggerメソッドを使用することはできません。 （clickのようないくつかのイベントでは動作しますが、気づいたように誰もがmouseoverのように動作します）。これはthis questionでも説明されています。

2つのオプションがあります。あなたはこのようなjQueryのonイベントのいずれかを使用：

$(elem).on('mouseover', function() { 
    alert('mouseover'); 
}); 

や他のjQueryのを使用せずにイベントをトリガすることです。 this questionにチェックしてください。