3

I'm looking for a way to trigger / "redirect" an event from one element to another. How can this be done or is it possible at all? To be clear: I'm not searching for a way to directly call an event function, instead I want the browser to execute it itself with all UI aftereffects which would normally occur if a mouse event would happen directly on the actual element. Similar to the behaviour of an <label> element for a checkbox.

Example: I have a DIV with a :hover CSS pseudo-class and I have a second DIV. Both DIVs are not nested. If the mouse is hovered over the second DIV, I want the browser to act like the mouse is hovered over the first DIV, so it would load the :hover CSS pseudo-class for it of the first DIV. But I don't want to create an explicit CSS name for it - I want the browser to use :hover and other CSS pseudo-classes.

Example

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>

No jQuery, please. Only plain vanilla JavaScript.

Edit: Using dispatchEvent doesn't trigger the UI (CSS pseudo-classes, like :hover). Example (sorry for one-liner):

<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>
guest271314
  • 1
  • 15
  • 104
  • 177
StanE
  • 2,704
  • 29
  • 38
  • 1
    Why can't you just change the element ID or class? – Prajwal Dec 29 '16 at 04:32
  • It's not about using foreign CSS classes. I want to "trigger" them. Similar to a ` – StanE Dec 29 '16 at 04:34
  • You want to call different event when one event gets triggered? – Prajwal Dec 29 '16 at 04:41
  • Kind of, but I don't want to "call" an event function directly, I want the browser to execute the event itself. Again: It is not directly about events. I'm interested in "triggering" the UI effects. I gave you an example with ` – StanE Dec 29 '16 at 04:49
  • As far as am aware, it is not yet possible to select a previous or parent element using `css`, see [Why we don't have a parent selector](https://snook.ca/archives/html_and_css/css-parent-selectors). Is requirement to achieve expected result using `css` alone? – guest271314 Dec 29 '16 at 05:12
  • @guest271314 Imagine I would like to write my own ` – StanE Dec 29 '16 at 05:13
  • @user25163 Why do you not use ` – guest271314 Dec 29 '16 at 05:14
  • Because a ` – StanE Dec 29 '16 at 05:15
  • It is not possible to select a previous element using `css`. _"Because a ` – guest271314 Dec 29 '16 at 05:15
  • Hmm... I think you don't understand me. I have no nested elements. And it doesn't matter if the other element is before or after the current element (or maybe I don't understand you). There are no *previous* elements. We could switch both DIVs in my example. My question is not about pure-CSS. I want to tell the browser through JavaScript to load the `:hover` style of the *foreign* element. – StanE Dec 29 '16 at 05:19
  • What do you mean by "foreign element"? _"There are no `previous` elements."_ , _"If the mouse is hovered over the second DIV, I want the browser to act like the mouse is hovered over the first DIV, so it would load the :hover CSS pseudo-class for it of the first DIV."_ First `div` is previous element sibling of second `div`. `css` does not provide a means to select a previous element sibling. Also, the current `css` should not allow another element other than `#div1` to render `:hover`, as `id` of element in `document` should be unique. Are you trying to achieve requirement using `javascript`? – guest271314 Dec 29 '16 at 05:23

1 Answers1

2

Now I'm pretty sure you want to dispatch a event in JavaScript.

It's pretty simple. You can dispatch a event by using this.

elem.dispatchEvent(event);

where elem is the target element.

You can have a look at Mozilla docs.

This is a code snippet I copied from the Mozilla docs. It dispatches a MouseClick Event. 

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");
  }
}

and this is for MouseOver event.

object.addEventListener("mouseover", myScript);

Check out W3CSchool doc.

StanE
  • 2,704
  • 29
  • 38
Prajwal
  • 3,930
  • 5
  • 24
  • 50
  • Thanks, but unfortunately this doesn't trigger the CSS pseudo-classes, like `:hover`. I tried it with `MouseEvent` and the event names `mouseover`, `mouseenter` and `mousemove`, but none of them triggered the UI (CSS). They trigger the associated event functions, but like I said, this is not what I'm looking for. I would like to try to dispatch `UIEvent` or `FocusEvent`, but I don't know how to create them (or to be precise: which event names to give them ("mouseover"?). – StanE Dec 29 '16 at 05:00
  • You need to pass a Event object. Not string. – Prajwal Dec 29 '16 at 05:08
  • I know. I'm talking about the constructor of `MouseEvent`. It requires the first param to be a string for the event name. I saw and tested the example. But I want to trigger the browser to use `:hover`, so the event name would (I think) be something like `mouseover` but not `click`. Imagine I would like to write my own ` – StanE Dec 29 '16 at 05:12
  • it is "mouseover" that example is for "click". I directly copied it from Mozilla docs. – Prajwal Dec 29 '16 at 05:16
  • I know. ;-) But neither of them work. Please test it with the code from my example. – StanE Dec 29 '16 at 05:21
  • 2
    Turns out, you cannot do that for `:hover`. Check out this question. http://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover – Prajwal Dec 29 '16 at 05:31
  • Thank you. This was the answer I was looking for. It does not solve my problem, because what I want to achieve does not seem to be possible. The sentense in the other answert *"You have to add a class and add/remove that on the mouseover/mouseout events manually."* says it. It's exactly what I feared to have to do: To create a separate CSS class name for the `:hover` pseudo-class, which makes it less modular (I don't want to modify existing CSS classes, since some are not mine). If you write this and the link to your answer, I will mark it as solved. Thanks. :-) – StanE Dec 29 '16 at 05:41