javascript - 间接触发 UI 事件

Question

我正在寻找一种方法来触发/“重定向”事件从一个元素到另一个元素。如何做到这一点，或者这有可能吗？需要说明的是:我不是在寻找一种直接调用事件函数的方法，相反，我希望浏览器自己执行它，并带有所有 UI 后遗症，如果直接发生鼠标事件，通常会出现这种后遗症在实际元素上。类似于 <label> 的行为复选框的元素。

示例:我有一个带有 :hover 的 DIV CSS 伪类和我有第二个 DIV。两个 DIV 都没有嵌套。如果鼠标悬停在第二个 DIV 上，我希望浏览器表现得像鼠标悬停在第一个 DIV 上一样，因此它会加载 :hover。第一个 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 .