JS equivalent for jQuery one()

Question

Can someone point me towards a solution for the following? I\'m trying to find a JS equivalent for this jQuery code:

var formSelector = \'my selector here\';         


        

Answer 1

Update

In most browsers you can now pass in once: true in an options object:

document.getElementById('btn').addEventListener('click', () => {
  console.log('Hello and goodbye');
}, {
  once: true,
});

<button id="btn">Click me</button>

---

Old way

In the eventlistener callback, just destroy the event listener :) Here's a helper function:

function oneTimeEvent(element, eventType, callback) {
  element.addEventListener(eventType, function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    return callback(e);
  });
}

var btn = document.querySelector('button');
oneTimeEvent(btn, 'click', function () {
  alert('♫ You clicked me once, but I won\'t let you click me twice, yeah!');
});

<button>Click me!</button>

Answer 2

Using ES6 and some closure this is a nice way to do it.

const button = document.querySelector('button');

function composeHandler(element, event, handler, ...captureArgs) {
  return function handlerFunc (...args) {
  	handler(...args);
    element.removeEventListener(event, handlerFunc, ...captureArgs);
  }
}

function addEventListenerOnce(element, event, handler, ...captureArgs) {
	element.addEventListener(event, composeHandler(element, event, handler, ...captureArgs), ...captureArgs);
}

addEventListenerOnce(button, 'click', (e) => alert('clicked on button ' + e.target.innerText), true)

<button>
  Click me once!
</button>

Answer 3

You could use once: true in the options parameter passed to addEventListener().

Browser support: Chrome 55+, Firefox 50+, Safari 10, Edge 16, IE not supported.

document.getElementById('foo').addEventListener('click', function(e) {
  alert('This will be displayed only once.');
}, { once: true });

<button id="foo">Click me</button>

Reference:

• Once Upon an Event Listener
• Can I Use... "once" event listener option

Answer 4

Here's a really simple solution using data attributes.

document.querySelector('#click').addEventListener('click', function(e){
    if(e.currentTarget.dataset.triggered) return;
    e.currentTarget.dataset.triggered = true;
    alert('clicked');
})

<button id="click">Click me</button>

Answer 5

Try to write your implementation of one. Like this:

function one(element,eventType,callback,self) {
    var one=function(event) {
        try{
            callback.call(self,event);
        } finally {
            element.removeEventListener(eventType,one);
        }
    }
    element.addEventListener(eventType,one);    
}