JavaScript: il metodo matches()

Questo metodo dell'implementazione DOM di JavaScript serve a verificare se un elemento viene selezionato da un selettore CSS.

Il metodo matches() restituisce un valore booleano che indica se l'elemento viene selezionato da un selettore CSS passato come argomento.

Supponiamo di avere questo elemento:

<div id="test" class="foo bar"></div>

Useremo il metodo in questo modo:

const element = document.getElementById('test');
element.matches('.foo'); // true
element.matches('.baz'); // false

Questo metodo si rivela estremamente utile nella event delegation. Infatti nel listener abbiamo accesso ad event.target ma non sappiamo spesso quale sia l'elemento sui cui è stato invocato l'evento.

document.body.addEventListener('click', evt => {
    const element = evt.target;
    if(element.matches('#test')) {
        //...
    }
}, false);