Share your repls and programming experiences

← Back to all posts
DOTON - Events made simple for JS.
h
kaldisberzins (346)

DOTON

Events in JS are a big pain in my opinion. You have two options - either use element.onclick = (e) => which you can use only once and is not suggested or you have to use element.addEventListener which is fine until you have to remove the listener. To remove a listener you have to keep the function around to provide it again and you also have to provide everything exactly as you set it or it will just silently fail. And of course everything is so verbose that you end up typing out walls of element.removeEventListener() for any decent sized project.

This is where DOTON comes in

All you have to do to bind a function to an event is let listener = element.on('...', (e) => {}).
And then to remove it just execute element.off(listener). It's that easy. If you want it to only execute once just write let listener = element.once('...', (e) => {}). DOTON will handle properly adding and removing the listeners internally. It is not a framework, but a library that adds a few additional helpful functions to elements. It is non-obstructive and attempts to live inside its own evironment where it can. It does not override the default addEventListener functions and as far as I know it is compatible with vanilla events. However, do note that removeAllListeners only works on listeners created by the library.

Features

  • Easy, non-verbose adding and removing of listeners.
  • Option to remove all listeners on an element.
  • Very lightweight.
  • Option to pause listening without having to re-add event listeners.

Get it

Paste one of the following above your other scripts

Minified:
<script src="https://doton--kaldisberzins.repl.co/doton.min.js"></script>

Non-minified:
<script src="https://doton--kaldisberzins.repl.co/doton.js"></script>

Example and source

Usage

  1. Grab a copy of doton.js or doton.min.js if you don't want to read the code. If you want to use it as a module add export default DOTON; to the end and then of course use import DOTON from './doton.js; wherever you will use it. You can also copy and paste the code found here.

  2. Initialize the library. To do this you must call const el = new DOTON(applyToWindow, applyGlobally). You get given two options - applyToWindow and applyGlobally. Provide true or false for each. applyToWindow asks if the window object should also get modified to work with .on() and the other functions. Default - false. applyGlobally asks if the functions should get applied to the Element prototype. This means that all elements will automatically get the functions added to them no matter how you get them - with document.getElementById or document.createElement or however else. However, I do have to advise against this because it seems tempting. Modifying the Element prototype can lead to behavior that leaves you scratching your head a few months later as it is very hard to later understand from the code where these .on and other functions are coming from. If this is not a concern for you then proceed but be warned. Default - false.

  3. Get some elements. If you set applyGlobally to true then this would just be document.getElementById or something similar. If you have decided to play safe and not modify prototypes then you get rewarded because getting an element is even shorter - el.wrap(id). el in this case is whatever you named the variable when writing new DOTON(). And the id is the id of the element without a # that the library will get from your document for you or it can also be the element that you already have got in some way. So theoretically you could write el.wrap(document.getElementById(id)) but that is rather long and pointless. The return value is the element that has been modified.

  4. Start listening for events. The syntax for this is element.on(event, function, options). The event parameter is any valid HTML DOM event such as click, mouseenter, etc. The full list can be found here. The function parameter is the callback function that you want to execute when the event happens. This can be anonymous unlike for standard events. It gets run with the event passed to it as an argument, just as in regular events. The options parameter expects an object that contains options as parameters. The three parameters currently are tag(string), context(object) and id(string). tag is a way of grouping your listeners. You can use it to remove a listener by tag. You will see how to do this in later steps. context is what the this keyword will refer to in your function. Not compatible with arrow functions. id is the unique identifier of the listener. By default, DOTON will generate one for you but if you set it this option will override the default id. The .on function returns a listener object. You will find out what you use it for in the next few steps. A typical example for .on could look like this:

const el = new DOTON(false, false);
let element = el.wrap('myID');

let listener = element.on('click', (e) => {
	console.log('This works!');
}, {tag: 'inWidget'});

Another option is to use .once, which works exactly the same as .on just the function only gets run once and then it auto-destructs.

  1. Pause some events. DOTON has a nice feature that lets you pause listening for events without having to remove and re-listen for events. You have two options - Either pause all events on an element, or pause a specific listener. This can be done with element.pause() or listener.pause(). The difference is that listener.pause() will only pause the specific listener i.e. the return of .on while element.pause() will pause all events that have been registered for an element. To resume listening just call element/listener.resume(). You can check if an element or listener is paused with the element/listener.isPaused() function which will return true or false. Pretty self-explanatory.

  2. Remove some events. The function for this is element.off(listener). listener is the return value of element.on(). This will remove one specific event listener - the one which you registered with .on. But you may also need to remove all listeners on an element, for example if you are hiding it away for some time and want to bring it back with fresh listeners. This can be done with element.removeAllListeners(tag, event). tag is the tag that you specified earlier in the options for.on. If set it will only remove events with the same tag as the one provided. This can be useful if you want to remove events from the window object but only a certain few that have to do with the element that you hide away. event is an optional parameter that will only remove events of a specific type for example click or mouseenter. This can be useful when you don't want to remove all events but rather only some of them. Another useful function is DOTON.removeAllListeners([element1, element2, ...], tag, event) which is a static property of the DOTON class, so use it with DOTON and not with the return value of new DOTON. It will loop through the array and remove the event listeners with the correct tag and/or event for all of the elements. Useful if you have lots of elements which need to have their listeners removed.

And that's all!

If you have any questions or suggestions for/about the library write them below in the comments. I will be happy to get as many as possible so even if it seems borderline impossible give it a shot and I will see what I can do. When I get your feedback I might change the library so make sure if you copy/paste the code that it is up to date every now and then. Be sure to check out the example if you want to see the library in action. Otherwise, thanks for reading to the bottom of this, I hope you find this useful.

@kaldisberzins.

Comments
hotnewtop
MatthewDoan1 (333)

Can't you just use jquery's .on?

kaldisberzins (346)

@MatthewDoan1 Nothing is stopping you from doing that. However, jquery is a framework that makes you use their environment, while DOTON does not force an environment on you. Moreover, jquery is rather big as a file, around 240KB, while this library is around 2 KB. I also think that jquery's .on does not solve the problem of having to pass everything back in exactly as it was. It will also just silently fail if you make one mistake. The only real difference between jquery and the default api in terms of events is that jquery is less verbose and there is an option to remove all events on an element.

MatthewDoan1 (333)

@kaldisberzins I see; this is a stand-alone event API. Very useful!

Vandesm14 (2734)

I really want to build something with this. Great job!

kaldisberzins (346)

@Vandesm14 it is being used in replm ;).