Get classList from event

Question

I have a simple JS event:

var changeAddress = document.getElementsByClassName('modal-open');

if (changeAddress.length) {
    var a = 0;
    while (a < changeAddress.length) {
        changeAddress[a].addEventListener('click', function () {
            console.log(this); // Here i want to get classList
            document.querySelector('.modal').removeAttribute('hidden');
        });
        a++;
    }
}

How can I get classList from this?

It's not necessary get it from this or throw classList. I just want to get all class names of element on which event is triggered. Thanks!

If the code that you've written is in event handler, then you can directly use event.target.classList — Gangadhar Jannu, May 17 '16 at 13:22
What is `this` in that context (where you do `console.log(this)`)? You're not inside the click handler at that point, why do you want the `classList` there? *Inside* the click handler however, you can do `this.classList`. — gen_Eric, May 17 '16 at 13:22
The place you want to get the `classList` is outside of the event handler, so no event has been triggered at that point. All you have is an array of elements in `changeAddress`. — Rhumborl, May 17 '16 at 13:23
It is not clear from which event. Inside click handlers or this whole function is being called on some event. — Yury Tarabanko, May 17 '16 at 13:25
@AleshaOleg: So, what do you see from your `console.log`? Since it's inside the event, you should be able to do `this.classList`. — gen_Eric, May 17 '16 at 13:27
@GangadharJannu thanks! `event.target.classList` work! Could you please answer this question? I will mark it as answer — AleshaOleg, May 17 '16 at 13:29
@RocketHazmat it's `undefined`, but `event.target.className` works! — AleshaOleg, May 17 '16 at 13:32

score 3 · Accepted Answer · edited May 23 '17 at 11:52

In the event handler callback you can get event as a parameter. With 'event' param we can get list of classes using either className or classList.

Using classList: event.target.classList will directly returns list of class names in an Array.
Using className: event.target.className will return string representation of class names with space as seperator. So you can use event.target.className.split("/\s") which will return array of class names.

We can use className or classList. className is supported by older browsers but modification (add, toggle, remove...) of classes is a tedious task, so classList is introduced and is easy to use.

However the classList property is not widely supported yet

Please refer Code with classList does not work in IE? for cross browser support

Get classList from event

1 Answers1