# Add EventListener Sub Flags

**URL:** <https://es.discourse.group/t/add-eventlistener-sub-flags/1277>\
**Category:** 💡 Ideas\
**Tags:** proposal\
**Created:** [April 4, 2022, 2:19am UTC](https://es.discourse.group/t/add-eventlistener-sub-flags/1277 "2022-04-04T02:19:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Seagat2011](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/seagat2011/32/367_2.png) [@Seagat2011](https://es.discourse.group/u/Seagat2011)\
**Post date:** [April 4, 2022, 2:19am UTC](https://es.discourse.group/t/add-eventlistener-sub-flags/1277/1 "2022-04-04T02:19:49Z")

</div>

Add EventListener Sub Flags

EventListeners allow the addition of a preset delay before firing the callback parameter (event throttling).  
However to reduce bandwith when polling a remote server, and because the number of keystrokes-, scrolling-, mousemove- or resize events is non deterministic,  
it is more useful to "batch" events and fire the callback once

This may be so common in use today it may be beneficial to add it to the standard

REFERENCE

[![](https://global.discourse-cdn.com/free1/uploads/es/original/2X/7/7f3e3af6d7ea0c282f0745c983d01a5f5a268171.jpeg "Learn Debounce And Throttle In 16 Minutes") ](https://www.youtube.com/watch?v=cjIswDCKgu0)

```javascript
// CURRENT //

const input = document.getElementById("input")
const defaultText = document.getElementById("defaultText")
const debouncedText = document.getElementById("debouncedText")
const throttleText = document.getElementById("throttleText")
const mouseEvents = document.getElementById("mouseEvents")

function debounce(cb, delay = 1000){
    let timeout = null
    return (...args) => {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            cb(...args)
        }, delay)
    }
}

const updateDebouncedText = debounce(text => {
    defaultText.textContent = text
}, 250)

function throttle(cb, delay = 1000){
    let shouldWait = false
    let waitingArgs = null
    const timeoutFunc = () => {
        if(shouldWait == null){
            shouldWait = false
        } else {
            cb(...waitingArgs)
            waitingArgs = null
            setTimeout(timeoutFunc, delay)
        }
    }
    return (...args) => {
        if (shouldWait){
            waitingArgs = args
            return
        }
        cb(...args)
        shouldWait = true
        setTimeout(timeoutFunc, delay)
    }
}

const updateThrottleText = throttle(text => {
    defaultText.textContent = text
}, 250)

input.addEventListener("input", e => {
    defaultText.textContent = e.target.value
    updateDebouncedText(e.target.value)
    updateThrottleText(e.target.value)
}, false)

// NEW //

input.addEventListener("post.batch.input", e => {
    debouncedText.textContent = e.target.value
}, 250) // fire callback on input event[s], batched as a single event, during delay (ie "a","b" == "ab") //

input.addEventListener("pre.throttle.input", e => {
    debouncedText.textContent = e.target.value
}, 250) // fire callback only on last event received during delay (ie "a","b" == "b") //

input.addEventListener("pre.throttle.mousemove", e => {
    mouseEvents.textContent = e.target.value
}, 250) // fire callback only on last event received during delay (ie "[100,30]","[-50,30]" == "[-50,30]") //

```

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [April 4, 2022, 3:08am UTC](https://es.discourse.group/t/add-eventlistener-sub-flags/1277/2 "2022-04-04T03:08:14Z")

</div>

Event listeners aren't part of the language standard; you'll want to head to [https://github.com/whatwg/html](https://github.com/whatwg/html) for that.

---

<div class="post-metadata">

**Author:** ![Seagat2011](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/seagat2011/32/367_2.png) [@Seagat2011](https://es.discourse.group/u/Seagat2011)\
**Post date:** [April 4, 2022, 3:59am UTC](https://es.discourse.group/t/add-eventlistener-sub-flags/1277/3 "2022-04-04T03:59:22Z")

</div>

Done!

You can follow the discussion, and add your own comments here:

Add EventListener Sub Flags [Suggestion] [Feature Request] · Issue #7780 · [whatwg/html · GitHub] - `https://github.com/whatwg/html/issues/7780`