Package Exports

clearall

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (clearall) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

clearall 🧹

Clear all event listeners at once.

Install

npm install clearall

Examples

Basic

import add from clearall

const clearAll = add(window, 'orientationchange', () => { /* ... */ })
    .add(document, 'mouseup', () => { /* ... */ })
    .add(document, 'mousedown', () => { /* ... */ })
    .add(document, 'mousemove', () => { /* ... */ })
    .add(emitter, 'onMessage', () => { /* ... */ })

clearAll()

Disposable Class

class View{
    _init(){
        this._clearEvents = add(window, 'orientationchange', this._onRotate)
            .add(this._el, 'mouseup', this._onMouseUp)
            .add(this._el, 'mousedown', this._onMouseDown)
            .add(this._el, 'mousemove', this._onMouseMove)
            .add(this._emitter, 'onMessage', this._onMessage)
    }

    dispose(){
        this._clearEvents()
    }

    /* ... */
}

React hook

function App(){
    const ref = useRef()

    useEffect(() => {
        const clearAll = add(window, 'orientationchange', () => { /* ... */ })
            .add(ref.current, 'mouseup', () => { /* ... */ })
            .add(ref.current, 'mousedown', () => { /* ... */ })
            .add(ref.current, 'mousemove', () => { /* ... */ })
            .add(emitter, 'onMessage', () => { /* ... */ })

        return clearAll
    }, [])

    /* ... */
}

API

add(listenable, eventName, listener, ...params)

Add an event listener and return a clearAll() function.

clearAll()

Remove all added event listeners.

clearAll.add(listenable, eventName, listener, ...params)

Add an event listener to the same clearAll context.

Tips

Type Error for window custom event in typescript.

// ❌ error
add(window, 'user_custom_event', () => { /* ... */})

For convenience, there are strong type constraints for some global objects. But sometimes this gets in the way. any can cancel this type constraint.

// ✔️ ok.
add(window as any, 'user_custom_event', () => { /* ... */})

License

MIT