https://github.com/shama/on-load

On load/unload events for DOM elements using a MutationObserver
https://github.com/shama/on-load

Last synced: about 2 months ago
JSON representation

On load/unload events for DOM elements using a MutationObserver

• Host: GitHub
• URL: https://github.com/shama/on-load
• Owner: shama
• Created: 2016-03-07T00:57:55.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-04-03T01:05:50.000Z (over 1 year ago)
• Last Synced: 2024-04-13T23:14:08.263Z (5 months ago)
• Language: JavaScript
• Size: 83 KB
• Stars: 113
• Watchers: 8
• Forks: 20
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# on-load

[![NPM version][npm-image]][npm-url]

[![build status][travis-image]][travis-url]

[![Downloads][downloads-image]][downloads-url]

[![js-standard-style][standard-image]][standard-url]

On load/unload events for DOM elements using a MutationObserver

## usage

```js

const onload = require('on-load')

const div = document.createElement('div')

onload(div, function (el) {

  console.log('in the dom')

}, function (el) {

  console.log('out of the dom')

})

// Will fire the onload

document.body.appendChild(div)

// ... some time later

// Will fire the onunload

document.body.removeChild(div)

```

## API

### `onload(node, onloadFn, onunloadFn, [caller])`

Pass a dom `node` to `onload` to have a `onloadFn` function fire when the dom `node` is added to the document `dom` and a `onunloadFn` fire when the dom `node` is removed from the document `dom`.  Optionally a `caller` ID can be set to associate the onload/onunload hooks with a particular instance of of a dom `node`.  This is commonly used when 'componentizing' dom nodes.

# license

(c) 2023 Kyle Robinson Young. MIT License

[npm-image]: https://img.shields.io/npm/v/on-load.svg?style=flat-square

[npm-url]: https://npmjs.org/package/on-load

[travis-image]: https://img.shields.io/travis/shama/on-load/master.svg?style=flat-square

[travis-url]: https://travis-ci.org/shama/on-load

[downloads-image]: http://img.shields.io/npm/dm/on-load.svg?style=flat-square

[downloads-url]: https://npmjs.org/package/on-load

[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square

[standard-url]: https://github.com/feross/standard