Monkey Raptor: JavaScript: Comparing (New) "input" and "change" Events to Capture Real Time [Range Input] State Changes

First
Let's see the stacking and markup of the HTML elements:

<p style="text-align:center">
    <input type="range"
           min="0"
           max="1000"
           step="1"
           value="500"
           id="inputRange"
           style="width: 100%"
           disabled>
</p>

As you can see, the <input type="range"> has some essential attributes:

type, to define the type of the input element.
min, to define the allowed minimum value.
max, to define the allowed maximum value.
step, to define the step-distance of each increment/decrement.
value, to define the initial value.
Others:
1. id is for JavaScript purpose.
2. style attribute is _{because somebody's being lazy...} an inline styling (CSS) attribute.
3. disabled attribute is for disabling the element.

It is wrapped within a paragraph tag, so it will have nice (default) empty vertical spaces and be displayed as a block element.

Second
Let's then create the option for comparing the event listener methods: input and change.

<p style="text-align:center">
    Choose the type of event capture <select id="eventOption">
        <option disabled selected>[pick one]</option>
        <option value="0">input</option>
        <option value="1">change</option>
    </select>
</p>

The method of stacking the select-option elements (plus the listener/controller) can be read on this other post.

Third
We'll create the output elements.

<div style="margin-bottom:30px">
    <textarea 
        id="textarea_output"
        readonly
        rows="1"
        style="overflow: hidden;
               overflow-x: auto;
               width: 100%;
               font-size: 24px;
               padding: 10px;
               background-color: white;
               box-shadow: none;
               text-align: center"
        placeholder="result"></textarea>
</div>

The last
The JavaScript listener/controller:

(function (d) { //d is document object.
    "use strict";
    var inputRange, outputValue, option, flag; //variables.

    //this function is for getting the element by selector name.
    function q(a) {
        return d.querySelector(a);
    }

    //initialize the elements.
    inputRange = q("#inputRange");
    outputValue = q("#textarea_output");
    option = q("#eventOption");

    //initialize flag value.
    flag = 0;

    //function for handling event capture.
    function theHandl(e) {
        var valueRange = Number(e.target.value);
        outputValue.value = e.type + " event | value: " + valueRange;
    }
    
    //switching the capture event.
    function flagSwitch(e) {
        flag = Number(e.target.value);
        inputRange.disabled = 0;
        inputRange.value = 500;
        if (!flag) { //if flag === 0 meaning that we use "input" event
            outputValue.value = "using \"input\" event";
            inputRange.removeEventListener("change", theHandl, 0);
            inputRange.addEventListener("input", theHandl, 0);
        } else { //if flag === 1 meaning that we use "change" event
            outputValue.value = "using \"change\" event";
            inputRange.removeEventListener("input", theHandl, 0);
            inputRange.addEventListener("change", theHandl, 0);
        }
    }
    option.onchange = flagSwitch;
}(document));

The above example is an anonymous auto-invoked function.

SYNOPSIS about the main logic

First, the <input type="range"> is disabled.
After we choose either option, it will then be enabled.
Then we can observe the different behavior of each event listener method by dragging or clicking the <input type="range">.

About the JavaScript

There are comments on it so you can see the flow.
Feel free to comment below.

The removeEventListener is useful so that we don't attach more than one different listeners to one element (for this particular example).
Anywho, even though there's no event listener attached to it, declaring the removeEventListener to an element won't produce error.
One more, removeEventListener works for registered addEventListener, not on listener attachment.

DEMO

Choose the type of event capture

All demo codes combined:

<!--INPUT-->
<p style="text-align:center">
    <input id="inputRange"
           type="range"
           min="0"
           max="1000"
           step="1"
           value="500"
           style="width: 100%"
           disabled>
</p>

<!--OPTION-->
<p style="text-align:center">
    Choose the type of event capture <select id="eventOption">
        <option disabled selected>[pick one]</option>
        <option value="0">input</option>
        <option value="1">change</option>
    </select>
</p>

<!--OUTPUT-->
<div style="margin-bottom:30px">
    <textarea 
        id="textarea_output"
        readonly
        rows="1"
        style="overflow: hidden;
               overflow-x: auto;
               width: 100%;
               font-size: 24px;
               padding: 10px;
               background-color: white;
               box-shadow: none;
               text-align: center"
        placeholder="result"></textarea>
</div>

<!--LISTENER/CONTROLLER-->
<script>
    (function (d) {
        "use strict";
        var inputRange, outputValue, option, flag;
        
        function q(a) {
            return d.querySelector(a);
        }

        inputRange = q("#inputRange");
        outputValue = q("#textarea_output");
        option = q("#eventOption");

        flag = 0;

        function theHandl(e) {
            var valueRange = Number(e.target.value);
            outputValue.value = e.type + " event | value: " + valueRange;
        }

        function flagSwitch(e) {
            flag = Number(e.target.value);
            inputRange.disabled = 0;
            inputRange.value = 500;
            if (!flag) {
                outputValue.value = "using \"input\" event";
                inputRange.removeEventListener("change", theHandl, 0);
                inputRange.addEventListener("input", theHandl, 0);
            } else {
                outputValue.value = "using \"change\" event";
                inputRange.removeEventListener("input", theHandl, 0);
                inputRange.addEventListener("change", theHandl, 0);
            }
        }
        option.onchange = flagSwitch;
    }(document));
</script>

In Conclusion

The new input event is great for "real time" capture.

These element and event are HTML5 features, so olden browsers don't support them.

Links

input event on MDN
input event on MSDN
<input type="range"> support table on CanIUse

Monkey Raptor

Wednesday, September 30, 2015

JavaScript: Comparing (New) "input" and "change" Events to Capture Real Time [Range Input] State Changes

No comments:

Post a Comment