JavaScript to find whether any div with a particular class was hovered over and then identify the exact div

Question

Here is my HTML:

<div id="doc1" class="document-container-title">
    <h3>Doc 1</h3>
</div>
<div id="doc2" class="document-container-title">
    <h3>Doc 2</h3>
</div>
<div id="doc3" class="document-container-title">
    <h3>Doc 3</h3>
</div>

As you can see, each div has a class of 'document-container-title'. I want to add some JavaScript to detect if any one of these divs were hovered over, and then I want to find out which specific div was hovered over. Specifically, I want to be able to detect whether a div with the class of document-container-title was hovered over. If so, then I want to get the id of the exact div that was hovered over.

I am only one month into JavaScript so a helpful explanation wouldn't hurt.

Thanks.

P.S. I don't mind using jQuery.

Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation). E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Aug 29 '21 at 11:18
Do you want the last hovered div only? Or a list of all divs where the mouse has been over? — Andreas, Aug 29 '21 at 11:20
Wow! I didn't even though this was possible through JavaScript. Event delegation rocks, and so do you! Thanks @SebastianSimon — chai, Aug 29 '21 at 11:23

score 1 · Answer 1 · answered Aug 29 '21 at 11:22

One solution is this one:

const elements = document.getElementsByClassName('document-container-title')
for (let element of elements) {
    element.addEventListener('mouseenter', (e) => {
        console.log(e.target.id);
    });
}

First, you will iterate over your DOM to get all elements with the specified class. The defined constant elements is now an array of html elements that have the document-container-title class. After that, you will have a simple for loop to iterate over all gathered elements. Finally, you will add an event listener for the current element in the for loop that will trigger the mouseenter event. Then, you can easily get the target with their corresponding id.

Reproduction link

Alireza Ahmadi · Accepted Answer · 2021-08-29T11:40:22.773

1

you can use jQuery mouseover or mouseenter event based on your requirement like this:

Based on this:

The mouseover event triggers when the mouse pointer enters the div element, and its child elements.

However

The mouseenter event is only triggered when the mouse pointer enters the div element.

$(".document-container-title").mouseover(function (e) {
     console.log(e.currentTarget.textContent);
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="doc1" class="document-container-title">
        <h3>Doc 1</h3>
    </div>
    <div id="doc2" class="document-container-title">
        <h3>Doc 2</h3>
    </div>
    <div id="doc3" class="document-container-title">
        <h3>Doc 3</h3>
    </div>

edited Aug 29 '21 at 11:40

answered Aug 29 '21 at 11:22

Alireza Ahmadi

8,579
5
15
42

Two questions: Why `Event.target` instead of `Event.currentTarget` and why `"mouseover"`? Don't use `Event.target` unless you really, really know what you're doing. Also learn about the difference about mouseover and mouseenter. – Roko C. Buljan Aug 29 '21 at 11:29
1

This worked exactly how I wanted it to. Thanks - the code explained itself! – chai Aug 29 '21 at 11:33
@RokoC.Buljan For the first part I got you and I updated my answer. but for the second part you are saying that `mouseover` does not satisfy OP's problem? – Alireza Ahmadi Aug 29 '21 at 11:34
_"but with jQuery has a clean way to do that"_ - A non-jQuery version isn't that different: `document.querySelectorAll(".document-container-title").forEach((el) => el.addEventListener("mouseover", (ev) => console.log(ev.currentTarget.id)))` – Andreas Aug 29 '21 at 11:40
@Andreas I know that but there is no need to create loop even with JavaScript. we can use event deligation – Alireza Ahmadi Aug 29 '21 at 11:41
_"we can use event deligation"_ - Your answer doesn't use event delegation o.O – Andreas Aug 29 '21 at 11:42
@Andreas I'm saying that with pure JavaScript :). sorry my poor English. But you are right my answer does not use event delegation. I said `Clean` because of few lines of code :) – Alireza Ahmadi Aug 29 '21 at 11:43

JavaScript to find whether any div with a particular class was hovered over and then identify the exact div

2 Answers2