https://github.com/yoriiis/validate-target
Easily validate target of an HTML element especially during event delegation
https://github.com/yoriiis/validate-target
events javascript target validate
Last synced: 4 months ago
JSON representation
Easily validate target of an HTML element especially during event delegation
- Host: GitHub
- URL: https://github.com/yoriiis/validate-target
- Owner: yoriiis
- License: mit
- Created: 2020-01-23T22:11:42.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-11-12T18:59:09.000Z (7 months ago)
- Last Synced: 2025-11-12T20:30:37.058Z (7 months ago)
- Topics: events, javascript, target, validate
- Language: JavaScript
- Homepage:
- Size: 477 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# validateTarget
[](https://github.com/yoriiis/validate-target/actions/workflows/build.yml) [](https://coveralls.io/github/yoriiis/validate-target?branch=main)
`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](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) 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](https://developer.mozilla.org/fr/docs/Web/API/Element/matches) to ensure `selectorString` match the target.
## Installation
The library is available as the `validate-target` package name on [npm](https://www.npmjs.com/package/validate-target) and [Github](https://github.com/yoriiis/validate-target).
```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 `22`.
### CDN
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](https://www.jsdelivr.com/package/npm/validate-target).
## How it works
### Basic usage
The following example returns `true` because the `nodeName` and `selectorString` properties match.
```html
Link
```
```js
validateTarget({
target: document.querySelector('.itemLink'),
selectorString: '.itemLink',
nodeName: 'a'
});
```
### Multiple node names
The following example returns `true` because `button` is a matched value for `nodeName` and `selectorString`.
```html
Link Button
```
```js
validateTarget({
target: document.querySelector('.itemLink'),
selectorString: '.itemLink',
nodeName: ['button', 'a']
});
```
### Event delegation
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.');
}
});
```
> [!NOTE]
> If the element contains other children and these should not be selectable, add the CSS property `pointer-events: none` on all these children.
---
## Parameters
### `target`
Type:
```ts
type target = HTMLElement;
```
Tells to the function the target element.
### `selectorString`
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.
### `nodeName`
Type:
```ts
type target = string | string[];
```
Tells the function the node names. The order of the parameters in the array does not matter.
## License
`validate-target` is licensed under the [MIT License](http://opensource.org/licenses/MIT).
Created with ♥ by [@yoriiis](http://github.com/yoriiis).