间接触发UI的触发事件

Question

我正在寻找一种方法来触发/“重定向”一个事件从一个元素到另一个。这怎么可能做到或者可能呢？要明确：我是而不是寻找直接调用事件函数的方式，而是我希望浏览器自行执行它，并且所有的UI后遗症通常会在鼠标事件直接发生在实际元素上时发生。类似于复选框的<label>元素的行为。

例如：我有一个:hover CSS伪类的DIV，我有第二个DIV。两个DIV都不嵌套。如果鼠标悬停在第二个DIV上，我希望浏览器像鼠标悬停在第一个DIV上那样操作，所以它会为第一个DIV加载第一个DIV的CSS伪类。但我不想为它创建一个明确的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）。示例（对不起，单行）：

<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。