UIのイベントを間接的にトリガーする

Question

イベントをある要素から別の要素にトリガー/リダイレクトする方法を探しています。どのようにこれを行うことができますか、それはまったく可能ですか？私はではありません。イベント関数を直接呼び出す方法を探しています。代わりに、マウスイベントが実際の要素で直接発生した場合に通常発生するすべてのUI後遺症をブラウザに実行させます。チェックボックスの要素の動作に似ています（<label>）。

例：私は:hover CSS疑似クラスを持つDIVを持っています。私は2番目のDIVを持っています。どちらのDIVも入れ子になっていません。マウスが2番目のDIV上にマウスを置いた場合、最初のDIVの上にマウスが移動したようにブラウザを動作させたいので、最初のDIVのCSS疑似クラス:hoverをロードします。しかし、私はそれに明示的なCSS名をつけたくないです - 私はブラウザに:hoverと他のCSS擬似クラスを使いたいと思っています。

例

CSS

#div1 { 
    background: green; 
} 

#div1:hover { 
    background: red; 
} 

#div2 { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    background: blue; 
} 

HTML

<div id="div1">Hello</div> 
<div id="div2">world</div> 

んjQueryを、してください。プレーンなバニラJavaScriptのみ。

編集： dispatchEventを使用しても、UI（CSS疑似クラス、:hoverなど）は起動されません。例（1行に申し訳ありません）：

<div id="div2" onmouseover="var e=document.getElementById('div1'); var evt = new MouseEvent('mouseover', {'view': window,'bubbles': true,'cancelable': true}); e.dispatchEvent(evt);">world</div> 

Answer 1

JavaScriptでイベントをディスパッチしたいと思います。

かなり簡単です。これを使用してイベントをディスパッチすることができます。

elem.dispatchEvent(event); 

ここで、elemはターゲット要素です。

Mozilla docsをご覧ください。

これはMozillaのドキュメントからコピーしたコードスニペットです。 MouseClickイベントをディスパッチします。

function simulateClick() { 
    var event = new MouseEvent('click', { 
    'view': window, 
    'bubbles': true, 
    'cancelable': true 
    }); 
    var cb = document.getElementById('checkbox'); 
    var cancelled = !cb.dispatchEvent(event); 
    if (cancelled) { 
    // A handler called preventDefault. 
    alert("cancelled"); 
    } else { 
    // None of the handlers called preventDefault. 
    alert("not cancelled"); 
    } 
} 

これはMouseOverイベントです。

object.addEventListener("mouseover", myScript); 

チェックアウトW3CSchool doc。