https://github.com/netsells/vue-dom-listeners

Listen to events on elements outside of the current component
https://github.com/netsells/vue-dom-listeners

Last synced: about 1 month ago
JSON representation

Listen to events on elements outside of the current component

• Host: GitHub
• URL: https://github.com/netsells/vue-dom-listeners
• Owner: netsells
• Created: 2019-05-16T14:37:15.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-11-13T21:04:12.000Z (over 3 years ago)
• Last Synced: 2025-03-15T09:43:52.673Z (about 2 months ago)
• Language: JavaScript
• Size: 1.47 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/%40netsells%2Fvue-dom-listeners.svg)](https://badge.fury.io/js/%40netsells%2Fvue-dom-listeners)

[![Build Status](https://travis-ci.com/netsells/vue-dom-listeners.svg?branch=master)](https://travis-ci.com/netsells/vue-dom-listeners)

[![codecov](https://codecov.io/gh/netsells/vue-dom-listeners/branch/master/graph/badge.svg)](https://codecov.io/gh/netsells/vue-dom-listeners)

# Vue DOM Listeners

Handle DOM events outside the current component without worrying about memory

leaks. When the component is destroyed, the mixin will automatically remove the

event listeners from the targets.

## Installation

```

yarn add @netsells/vue-dom-listeners

```

## Usage

This mixin adds addEventListener and removeEventListener methods to the

component. These take the same arguments as the standard functions, except the

first argument should be the event target, e.g.:

`document.addEventListener(...args)` -> `this.addEventListener(document, ...args)`

### Example

```javascript

import DomListeners from '@netsells/vue-dom-listeners';

export default {

    mixins: [DomListeners],

    mounted() {

        this.addEventListener(document, 'click', (e) => {

            // on clicking anywhere in document

        });

    },

};

```