Easily validate target of an HTML element especially during event delegation
npm install validate-target 
validate-target is a minimalist script to easily validate target of an HTML element especially during event delegation. Event delegation is advised for better performance, read MDN documentation for more information.
No needs to check nodeName or className properties, the function return directly a boolean when the target is correct.
The target can have multiple node name if element shares common code. The function use Element.matches to ensure selectorString match the target.
The library is available as the validate-target package name on npm and Github.
``bash`
npm install validate-target --save-dev
`bash`
yarn add validate-target --dev
> Warning validate-target@3 is ESM.
>
> Note Minimum supported Node.js version is 16.20.0.
You can also download it and include it with a script tag. The library will be registered as the global variable window.validateTarget.
`html`
> Note You can browse the source of the NPM package at jsdelivr.com/package/npm/validate-target.
The following example returns true because the nodeName and selectorString properties match.
`html`
Link
`js`
validateTarget({
target: document.querySelector('.itemLink'),
selectorString: '.itemLink',
nodeName: 'a'
});
The following example returns true because button is a matched value for nodeName and selectorString.
`html`
Link
`js`
validateTarget({
target: document.querySelector('.itemLink'),
selectorString: '.itemLink',
nodeName: ['button', 'a']
});
The following example creates a click event listener on the nav element and intercepts click events on the itemLink element.
`html`
`js
document.querySelector('.nav').addEventListener('click', (e) => {
const validateTargetLinkClick = validateTarget({
target: e.target,
selectorString: '.itemLink',
nodeName: 'a'
});
if (validateTargetLinkClick) {
console.log('Link is clicked.');
}
});
`
---
Type:
`ts`
type target = HTMLElement;
Tells to the function the target element.
Type:
`ts`
type target = string;
Tells the function the selector string of the target element. Can be any valid CSS selector (class, id, attribute, etc.). The function uses the Element.matches function.
Type:
`ts`
type target = string | string[];
Tells the function the node names. The order of the parameters in the array does not matter.
validate-target` is licensed under the MIT License.
Created with ♥ by @yoriiis.